前言
在前端开发中，路由是一个非常重要的概念，它决定了在网站中如何展示内容。Next.js 是一款流行的 React 框架，它内置了路由系统。本文将介绍 Next.js 中的动态路由实现。
什么是动态路由？
在传统的前端路由中，我们会将路由路径和对应的组件进行映射。例如，我们可以将 /login 路径映射到一个 Login 组件，而将 /about 路径映射到一个 About 组件。
但是，在某些情况下，我们需要动态生成路由，例如，我们希望用户可以根据不同的 ID 来查看不同的文章页面。这时候，我们就需要使用动态路由。
动态路由是一种可以接受参数的路由。通常情况下，动态路由由一个基础路径和一个或多个参数组成。例如，/post/:id 这个路由可以匹配 /post/1、/post/2 等路径。
如何使用动态路由？
在 Next.js 中，我们可以通过在 pages 目录下创建文件夹来实现动态路由。例如，我们可以在 pages 目录下创建一个名为 post 的文件夹，然后在该文件夹下创建一个名为 [id].js 的文件。
接着，在该文件中，我们需要导出一个组件，并将其作为默认导出。例如，我们可以创建一个名为 Post 的组件：
-- -------------------- ---- -------
-------- ------ ---- -- -
------ -
-----
---------------------
------------------
------
--
-
------ ------- -----在该组件中，我们可以使用 post 参数来访问当前页面所代表的文章的数据。
接着，我们需要在该组件的顶部使用 getServerSideProps 函数，从服务器端获取数据。例如，我们可以为该组件添加以下代码：
-- -------------------- ---- -------
------ ----- -------- -------------------- ------ -- -
----- ------ - ----------
----- --- - ----- --------------------------------------------------------------
----- ---- - ----- -----------
------ -
------ -
-----
--
--
-在该函数中，我们使用 params 参数来获取当前文章的 ID。然后，我们使用 fetch 函数从服务器端获取数据，并将其作为 post 参数返回。
最后，我们需要在 pages 目录下的 index.js 文件中使用 Link 组件来链接到 Post 组件。例如，我们可以为该组件添加以下代码：
-- -------------------- ---- -------
------ ---- ---- ------------
-------- ------ ----- -- -
------ -
-----
--------------
----
----------------- -- -
--- --------------
----- --------------------------
-------------------
-------
-----
---
-----
------
--
-
------ ----- -------- -------------------- -
----- --- - ----- ----------------------------------------------------
----- ----- - ----- -----------
------ -
------ -
------
--
--
-
------ ------- -----在该组件中，我们使用 Link 组件来链接到 Post 组件。为了保证页面刷新后依然可以访问到动态路由，我们需要在 href 属性中使用动态路由形式 /post/[id]。
总结
在本文中，我们介绍了 Next.js 中动态路由的实现方式。我们了解到动态路由是一种可以接受参数的路由，在 Next.js 中，我们可以通过在 pages 目录下创建文件夹来实现动态路由。同时，我们需要使用 getServerSideProps 函数从服务器端获取数据，并在使用 Link 组件链接到动态路由时使用 /post/[id] 的形式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482bd5448841e9894219818