在使用 Next.js 进行开发时，我们经常会遇到页面跳转时报 404 错误的问题。这种问题通常是由于 Next.js 的路由配置出现问题导致的。本文将介绍如何解决这个问题，并提供示例代码。
问题分析
在 Next.js 中，页面的路由配置主要是通过 pages 目录下的文件来实现的。例如，我们可以在 pages 目录下创建一个名为 about.js 的文件来实现一个关于页面的路由：
-- -------------------- ---- -------
-- --------------
------ ----- ---- -------
----- --------- - -- -- -
------ -
-----
--------------
------- -- --- ----- ---------
------
-
-
------ ------- ---------这个页面的路由路径就是 /about。
但是，在实际开发中，我们可能会遇到一些特殊的情况，例如：
- 需要使用动态路由，例如
/post/1、/post/2等； - 需要使用带参数的路由，例如
/search?q=keyword； - 需要使用自定义的路由配置，例如
/blog路径下的所有页面都使用BlogLayout组件作为布局。
这些情况都需要特殊的路由配置来实现。如果路由配置出现问题，就会导致页面跳转时出现 404 错误。
解决方案
使用动态路由
如果需要使用动态路由，可以在 pages 目录下创建一个名为 [id].js 的文件来实现。这个文件中的 id 参数可以在页面组件的 getInitialProps 方法中通过 query 参数获取到。例如：
-- -------------------- ---- -------
-- -------------
------ ----- ---- -------
----- -------- - -- ---- -- -- -
------ -
-----
---------------------
---------------------
------
-
-
------------------------ - ----- -- ----- -- -- -
----- -- - --------
----- -------- - ----- --------------------------------------------
----- ---- - ----- ---------------
------ - ---- -
-
------ ------- --------这个页面的路由路径可以是 /post/1、/post/2 等。
使用带参数的路由
如果需要使用带参数的路由，可以在 pages 目录下创建一个名为 search.js 的文件，并在页面组件中使用 useRouter 钩子来获取参数。例如：
-- -------------------- ---- -------
-- ---------------
------ ----- ---- -------
------ - --------- - ---- -------------
----- ---------- - -- -- -
----- ------ - -----------
----- ------- - -------------- -- --- --------
------ -
-----
---------------
------ -------- ---- -------------
------
-
-
------ ------- ----------这个页面的路由路径可以是 /search?q=keyword。
使用自定义的路由配置
如果需要使用自定义的路由配置，可以在 pages 目录下创建一个名为 _app.js 的文件，并在这个文件中使用 getInitialProps 方法来获取路由信息。例如：
-- -------------------- ---- -------
-- -------------
------ ----- ---- -------
------ --- ---- ----------
----- ----- - -- ---------- ---------- ---------- -- -- -
------ -
-----
---------------------------
---------- -------------- --
------
-
-
--------------------- - ----- -- ---------- --- -- -- -
--- --------- - --
-- --------------------------- -
--------- - ----- ------------------------------
-
----- ---------- - -
------ --- ----
-
------ - ---------- ---------- -
-
------ ------- -----这个文件中的 Component 参数是当前页面的组件，pageProps 参数是当前页面的 getInitialProps 方法返回的数据，routerInfo 参数是自定义的路由信息。
示例代码
下面是一个完整的 Next.js 应用，包含了以上三种路由配置方式的示例代码。你可以在本地运行这个应用，尝试不同的路由路径来测试路由配置是否正确。
-- -------------------- ---- -------
-- --------------
------ ----- ---- -------
------ ---- ---- -----------
----- -------- - -- -- -
------ -
-----
-------------
----
--------- --------------------------------------
--------- ---------------------- -----------------
--------- ---------------------- -----------------
--------- --------------------------------------------------
--------- ------------------------------------
-----
------
-
-
------ ------- --------
-- --------------
------ ----- ---- -------
----- --------- - -- -- -
------ -
-----
--------------
------- -- --- ----- ---------
------
-
-
------ ------- ---------
-- -------------
------ ----- ---- -------
----- -------- - -- ---- -- -- -
------ -
-----
---------------------
---------------------
------
-
-
------------------------ - ----- -- ----- -- -- -
----- -- - --------
----- -------- - ----- --------------------------------------------
----- ---- - ----- ---------------
------ - ---- -
-
------ ------- --------
-- ---------------
------ ----- ---- -------
------ - --------- - ---- -------------
----- ---------- - -- -- -
----- ------ - -----------
----- ------- - -------------- -- --- --------
------ -
-----
---------------
------ -------- ---- -------------
------
-
-
------ ------- ----------
-- -------------
------ ----- ---- -------
------ --- ---- ----------
----- ----- - -- ---------- ---------- ---------- -- -- -
------ -
-----
---------------------------
---------- -------------- --
------
-
-
--------------------- - ----- -- ---------- --- -- -- -
--- --------- - --
-- --------------------------- -
--------- - ----- ------------------------------
-
----- ---------- - -
------ --- ----
-
------ - ---------- ---------- -
-
------ ------- -----总结
在 Next.js 中，正确的路由配置是保证页面跳转正确的关键。本文介绍了使用动态路由、带参数的路由和自定义的路由配置来解决页面跳转时出现 404 错误的问题，并提供了示例代码。希望这篇文章对你有所帮助，如果你有任何问题或建议，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653c71be7d4982a6eb691567