Next.js 是一款针对 React 应用进行服务端渲染和静态网站生成的框架，它提供了一种简单易用的路由系统，方便开发者对应用进行路由控制。本文将介绍 Next.js 中路由的基本使用和参数传递，让你在使用 Next.js 开发时更加得心应手。
基本路由
Next.js 的路由系统默认使用文件系统结构来进行路由匹配。在 pages 目录下，每一个文件都被视为一个路由页面，路由以文件路径为准。例如：
pages/ -- index.js -- about.js -- posts/ ---- index.js ---- post.js
上述代码中，index.js 代表站点首页，about.js 代表关于页面，posts/index.js 代表文章列表页面，posts/post.js 代表单篇文章详情页面。
在应用运行时，浏览器地址栏中输入 http://localhost:3000 会默认打开站点首页；输入 http://localhost:3000/about 会打开关于页面；输入 http://localhost:3000/posts 会打开文章列表页面；输入 http://localhost:3000/posts/post 会打开单篇文章详情页面。
需要注意的是，Next.js 中默认使用的是 React 和 JSX，页面组件需要使用默认导出。例如：
export default function Home() {
return (
<div>
<h1>Hello, Next.js!</h1>
</div>
)
}以上代码中，Home 函数组件被默认导出，代表站点首页。页面组件支持使用 React 生命周期函数，从而实现更丰富的交互效果。
路由传参
我们在开发中，经常需要在页面之间传递参数。Next.js 路由系统提供了方便的参数传递方式，包括 3 种传递方式：query 参数、路由参数、组件参数。
Query 参数
Query 参数是指路由中的查询参数，格式为 ?key=value，可以通过 useRouter 钩子函数的 query 属性访问。
例如，在 posts/index.js 文件中，获取路由参数 category 和 page，可以如下编写代码：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------- -
----- ------ - -----------
----- - --------- ---- - - ------------
------ -
-----
--------------
------------ --------------
-------- ----------
------
-
-
------ ------- -----以上代码中，通过 useRouter 钩子函数获取 router 对象，然后使用 query 属性获取路由参数，最终展示在页面中。
在浏览器地址栏中输入 http://localhost:3000/posts?category=react&page=1，页面将展示如下信息：
Posts Category: react Page: 1
路由参数
路由参数是指在路由中包含的动态参数，例如在 posts/[postId].js 文件中，参数为 postId，可以通过 useRouter 钩子函数的 query 属性访问。
例如：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
----- - ------ - - ------------
------ -
-----
-------- -------------
------
-
-
------ ------- ----在浏览器地址栏中输入 http://localhost:3000/posts/123，页面将展示如下信息：
Post 123
组件参数
组件参数是在组件之间进行传递的参数，与路由系统本身无关，但是在 Next.js 应用中，由于路由系统被整合在应用中，组件参数也经常被用于路由传参。
例如，在 posts/index.js 文件中，给 PostLink 组件传递 postId 参数：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ---------- ------ -- -
------ -
----- --------------------------
------- ------------
-------
-
-
-------- ------- -
------ -
-----
--------------
--------- ------------ --
--------- ------------ --
------
-
-
------ ------- -----以上代码定义了 PostLink 组件，接受 postId 参数作为输入，在页面中展示 postId 和链接到相应的路由。
总结
Next.js 的路由系统提供了简单的文件系统路由匹配机制，同时支持多种参数传递方式，包括 query 参数、路由参数和组件参数。在开发 Next.js 应用时，掌握路由基础知识和参数传递方法是非常重要的，可以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64924bdd48841e9894019443