在 Next.js 中，路由是非常重要的一部分。它决定了页面的访问路径，也影响着页面的渲染和数据获取。本文将详细介绍 Next.js 中的路由配置，包括路由的基本使用、动态路由、嵌套路由等内容。
路由的基本使用
在 Next.js 中，我们可以通过 Link 组件来实现页面之间的跳转。例如，我们要跳转到 /about 页面，可以这样写：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ---------- -
------ -
-----
----- --------------
------------
-------
------
-
-
------ ------- --------这里，Link 组件的 href 属性指定了跳转的目标路径。注意，这里的路径是相对于应用根目录的路径，而不是相对于当前页面的路径。
如果我们需要在跳转时传递一些参数，可以通过 query 参数来实现。例如，我们要跳转到 /blog?id=123 页面，可以这样写：
-- -------------------- ---- -------
------ ---- ---- -----------
-------- ---------- -
------ -
-----
----- --------------------
-----------
-------
------
-
-
------ ------- --------在目标页面中，我们可以通过 useRouter 钩子来获取传递的参数。例如，我们要获取 /blog?id=123 中的 id 参数，可以这样写：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ---------- -
----- ------ - -----------
----- - -- - - ------------
------ -
-----
-------- ---------
------
-
-
------ ------- --------这里，useRouter 钩子返回了一个 Router 对象，其中的 query 属性就是传递的参数。
动态路由
除了通过 query 参数传递参数，我们还可以通过动态路由来实现。动态路由是指在路径中使用占位符来表示参数，例如 /blog/[id]，其中的 [id] 就是占位符。
我们可以通过 getStaticPaths 或 getServerSideProps 方法来预先生成静态页面，或在每次请求时生成页面。例如，我们要生成 /blog/123 页面，可以这样写：
-- -------------------- ---- -------
-- ------------------
------ ----- -------- ---------------- -
------ -
------ -
- ------- - --- ----- - -
--
--------- -----
-
-
------ ----- -------- ---------------- ------ -- -
------ - ------ - --- --------- - -
-
-------- ---------- -- -- -
------ -
-----
-------- ---------
------
-
-
------ ------- --------这里，getStaticPaths 方法返回了一个 paths 数组，其中包含了需要生成的所有页面的参数。fallback 属性指定了是否允许访问没有预先生成的页面，如果为 true，则会在访问时动态生成页面。
在页面中，我们可以通过 useRouter 钩子来获取动态路由中的参数。例如，我们要获取 /blog/123 中的 id 参数，可以这样写：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ---------- -
----- ------ - -----------
----- - -- - - ------------
------ -
-----
-------- ---------
------
-
-
------ ------- --------嵌套路由
在 Next.js 中，我们可以使用嵌套路由来组织页面结构。嵌套路由是指在路径中使用多个占位符来表示参数，例如 /blog/[category]/[id]，其中的 [category] 和 [id] 都是占位符。
我们可以通过 getStaticPaths 或 getServerSideProps 方法来预先生成静态页面，或在每次请求时生成页面。例如，我们要生成 /blog/js/123 页面，可以这样写：
-- -------------------- ---- -------
-- -----------------------------
------ ----- -------- ---------------- -
------ -
------ -
- ------- - --------- ----- --- ----- - -
--
--------- -----
-
-
------ ----- -------- ---------------- ------ -- -
------ - ------ - --------- ---------------- --- --------- - -
-
-------- ---------- --------- -- -- -
------ -
-----
-------- ---------- ---------
------
-
-
------ ------- --------在页面中，我们可以通过 useRouter 钩子来获取嵌套路由中的参数。例如，我们要获取 /blog/js/123 中的 category 和 id 参数，可以这样写：
-- -------------------- ---- -------
------ - --------- - ---- -------------
-------- ---------- -
----- ------ - -----------
----- - --------- -- - - ------------
------ -
-----
-------- ---------- ---------
------
-
-
------ ------- --------总结
本文详细介绍了 Next.js 中的路由配置，包括路由的基本使用、动态路由、嵌套路由等内容。希望本文能够对大家学习和使用 Next.js 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6556ba76d2f5e1655d11acbb