前言
Next.js 是一个流行的 React 框架，它帮助开发人员构建 SSR（服务器端渲染）React 应用程序。它还提供了许多其他功能，例如代码分割，预取和静态导出。在使用 Next.js 开发项目时，路由导航功能是不可或缺的一部分。本文将介绍 Next.js 中的路由导航实现方法，包括基本路由、动态路由和异步路由。
基本路由
Next.js 提供了一种简单而强大的路由系统，可以帮助我们构建一个基本的路由。一般情况下，我们使用 Link 组件来实现路由导航。
在下面的示例中，我们将构建一个简单的 Next.js 应用程序，并在首页和关于页面之间进行导航。
首先，我们需要运行以下命令创建一个新的 Next.js 项目：
npx create-next-app my-app
接下来，我们创建两个页面：
pages/index.js：首页pages/about.js：关于页面
现在，在 index.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
-----
----------- -- -- -------------
----- --------------
------------
-------
------
-
-在上面的代码中，我们使用 Link 组件来导航到关于页面。在 href 属性中，我们指定了要导航到的页面。在本例中，我们将导航到 /about 路径。
当用户点击“关于”链接时，Next.js 将在客户端中执行导航，而不需要重新加载整个页面。
动态路由
在某些情况下，我们需要使用动态路由。例如，我们希望在我们的应用程序中显示一个带有名称的用户页面，例如 /users/john。在这种情况下，我们需要使用 Next.js 提供的动态路由。
动态路由通过使用方括号 ([ ]) 来指定路径中的参数。
在下面的示例中，我们将构建一个简单的 Next.js 应用程序，并在用户页面之间进行导航。
首先，我们需要运行以下命令创建一个新的 Next.js 项目：
npx create-next-app my-app
接下来，我们创建两个页面：
pages/index.js：首页pages/users/[name].js：用户页面
在 [index.js](http://index.js) 文件中添加以下代码：
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
-----
----------- -- -- -------------
----- -------------------
--------- --------
-------
----- -------------------
--------- --------
-------
------
-
-在上面的代码中，我们使用 Link 组件来导航到用户页面。在 href 属性中，我们指定了要动态生成的用户名称。在本例中，我们将导航到 /users/john 和 /users/jane 路径。
现在，在 users/[name].js 文件中添加以下代码：
-- -------------------- ---- -------
------ ------- -------- ---------- ---- -- -
------ -
----------- -- -------- ----------
-
-
------ ----- -------- -------------------- ------ -- -
------ -
------ -
----- -----------
-
-
-在上面的代码中，我们从 params 中获取用户名称，并将其传递给 UserPage 组件。我们使用 getServerSideProps 函数来从服务器获取数据，并将名称作为属性传递给 UserPage 组件。
当用户点击“John's Page”链接时，Next.js 将使用 getServerSideProps 函数在服务器上生成 /users/john 页面，并将 name 属性传递给 UserPage 组件。Next.js 将快速渲染用户页面，并在客户端上提供动态导航。
异步路由
在某些情况下，我们需要使用异步路由。例如，我们希望使用某些 API 数据来生成我们页面上的内容。在这种情况下，我们需要使用 Next.js 提供的异步路由。
异步路由通过使用函数组件作为页面组件并返回一个 Promise 来实现。在 Promise 解决后，Next.js 将使用 Resolved Promise 中返回的组件内容渲染页面。
在下面的示例中，我们将构建一个简单的 Next.js 应用程序，并在异步方式下获取 API 数据。
首先，我们需要运行以下命令创建一个新的 Next.js 项目：
npx create-next-app my-app
接下来，我们创建两个页面：
pages/index.js：首页pages/posts.js：文章页面
在 index.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
-----
----------- -- -- -------------
----- --------------
------- ---------
-------
------
-
-在上面的代码中，我们使用 Link 组件来导航到文章页面。在本例中，我们将导航到 /posts 路径。
现在，在 posts.js 文件中添加以下代码：
-- -------------------- ---- -------
------ ------- -------- ------- ----- -- -
------ -
-----
------ ----------
--------------- -- -
---- --------------
---------------------
------------------
------
---
------
-
-
------ ----- -------- ---------------- -
----- --- - ----- ---------------------------------------------------
----- ----- - ----- ----------
------ -
------ -
-----
-
-
-在上面的代码中，我们使用 fetch 函数从 JSON Placeholder API 获取文章数据。我们使用 getStaticProps 函数在构建时生成 /posts 页面，并将文章数据作为属性传递给 Posts 组件。在构建时生成页面可以使用 next build 和 next start 命令获得更好的性能。
当用户点击“View Posts”链接时，Next.js 将使用 Posts 组件从服务器预渲染 /posts 页面，并在客户端上提供动态导航。
总结
在本文中，我们介绍了 Next.js 中的路由导航实现方法，包括基本路由、动态路由和异步路由。这些功能可以帮助你创建复杂的应用程序，并带来更好的性能和用户体验。
要深入了解 Next.js 的路由系统，请参阅官方文档。希望您能从这篇文章中学到有用的信息，并将它们应用于您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645aecce968c7c53b0d38259