简介
Next.js 是一个流行的 React 框架，它提供了一些强大的功能，如服务器渲染、静态生成、动态导入和代码分割等。其中一个最强大的功能是路由系统。Next.js 的路由系统可以帮助我们管理页面和 URL 之间的映射关系。
在本文中，我们将探讨 Next.js 中的路由类型，包括客户端路由、服务器端路由和动态路由。我们将深入了解每种类型的用途和实现方式，并提供示例代码，帮助你更好地理解和使用 Next.js 的路由系统。
客户端路由
客户端路由是指在浏览器中进行的路由操作。它们不会向服务器发送请求，而是在客户端中处理 URL 的更改。Next.js 的客户端路由使用 React Router 4 来实现。
配置客户端路由
在 Next.js 中配置客户端路由非常简单。我们只需要在 _app.js 文件中导入 Router 组件，然后使用 Link 组件来创建链接。
-- -------------
------ ------ ---- -------------
------ ---- ---- -----------
-------- ------- ---------- --------- -- -
------ -
--
-----
----- --------------------
----- --------------------------
----- ------------------------
------
---------- -------------- --
---
-
-
------ ------- -----上面的代码中，我们使用 Link 组件创建了三个链接：/、/about 和 /blog。当用户点击链接时，Router 组件将自动处理 URL 的更改，并加载相应的页面组件。
使用客户端路由
Next.js 的客户端路由非常易于使用。我们只需要使用 Link 组件来创建链接，并在页面组件中导入 useRouter 钩子来获取当前路由信息。
-- --------------
------ ---- ---- -----------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
------ -
--
---------- -------------
-----
----- --------------------------
----- ------------------------
------
---------- ------ ---------------------
---
-
-
------ ------- ----上面的代码中，我们使用 Link 组件创建了两个链接：/about 和 /blog。当用户点击链接时，useRouter 钩子将自动获取当前路由信息并显示在页面上。
服务器端路由
服务器端路由是指在服务器上进行的路由操作。它们向服务器发送请求，并且可以在服务器上处理请求和响应。Next.js 的服务器端路由使用 Express 来实现。
配置服务器端路由
在 Next.js 中配置服务器端路由需要创建一个 API 路由文件。我们可以在 pages/api 目录下创建一个新的 JavaScript 文件，然后导出一个函数。这个函数将接收一个 req 对象和一个 res 对象，并返回一个 JSON 响应。
-- ------------------ ------ ------- -------- ------------ ---- - ---------------------- -------- ------- --------- -- -
上面的代码中，我们创建了一个名为 hello 的 API 路由。当用户访问 /api/hello 时，服务器将调用 handler 函数，并返回一个 JSON 响应。
使用服务器端路由
Next.js 的服务器端路由非常易于使用。我们只需要在页面组件中使用 fetch 函数来发送请求，并在服务器上处理响应。
-- --------------
------ - --------- --------- - ---- -------
-------- ------ -
----- --------- ----------- - ------------
------------ -- -
-------------------
--------- -- -----------
---------- -- -------------------------
-- ---
------ -
--
---------- -------------
----------------
---
-
-
------ ------- ----上面的代码中，我们使用 fetch 函数发送了一个 GET 请求到 /api/hello，并在服务器上处理响应。当响应返回时，我们将消息存储在组件状态中，并在页面上显示它。
动态路由
动态路由是指在 URL 中包含参数的路由。它们可以帮助我们创建动态页面，例如博客文章或产品页面。Next.js 的动态路由使用类似于 Express 的路由参数来实现。
配置动态路由
在 Next.js 中配置动态路由需要创建一个页面文件夹，并在文件夹名称中包含参数名称。例如，如果我们想要创建一个名为 blog 的动态路由，并在 URL 中包含一个名为 id 的参数，则我们应该在 pages/blog/[id] 目录下创建一个新的 JavaScript 文件。
-- ------------------
-------- ------ -- -- -
------ -
--
-------- ---- ----------
------- -- --- ---- ---- ---- -- ---------
---
-
-
------ ----- -------- ---------------- -
------ -
------ -
- ------- - --- --- - --
- ------- - --- --- - --
- ------- - --- --- - -
--
--------- -----
-
-
------ ----- -------- ---------------- ------ -- -
------ - ------ - --- --------- - -
-
------ ------- ----上面的代码中，我们创建了一个名为 blog 的动态路由，并在 URL 中包含一个名为 id 的参数。我们还定义了两个静态生成函数：getStaticPaths 和 getStaticProps。getStaticPaths 函数用于生成所有可能的 URL，而 getStaticProps 函数用于获取页面数据。
使用动态路由
Next.js 的动态路由非常易于使用。我们只需要在页面组件中导入 useRouter 钩子来获取当前路由参数。
-- ------------------
------ - --------- - ---- -------------
-------- ------ -
----- ------ - -----------
----- - -- - - ------------
------ -
--
-------- ---- ----------
------- -- --- ---- ---- ---- -- ---------
---
-
-
------ ------- ----上面的代码中，我们使用 useRouter 钩子获取了当前路由参数，并在页面上显示了它。
总结
Next.js 的路由系统提供了强大的功能，包括客户端路由、服务器端路由和动态路由。我们可以使用这些功能来创建高性能的 Web 应用程序，并为用户提供无缝的体验。在本文中，我们深入了解了每种类型的用途和实现方式，并提供了示例代码，帮助你更好地理解和使用 Next.js 的路由系统。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663f03e1d3423812e4d3fe0a