本篇文章旨在介绍如何在 Next.js 中使用 React Router，并提供详细的步骤和示例代码。React Router 是一个流行的 React 应用程序的路由器，使得快捷而简单的路由处理成为可能。而 Next.js 则是一个由 Node.js 支持的 React 应用程序框架，可用于服务器端渲染 (SSR) 和静态站点生成。通过使用 Next.js 和 React Router，我们可以轻松地为 React 应用程序添加路由特性。
第一步：安装 React Router 和 Next.js
首先，你需要安装 React Router 和 Next.js。你可以使用 npm 或者 yarn 来进行安装，具体方法如下：
npm install --save react-router-dom next #使用 npm 安装 //or yarn add react-router-dom next #使用 yarn 安装
我们需要两个包，一个用于 React Router 路由，另一个用于 Next.js 应用程序。React Router 包括一些模块，我们只需要访问 react-router-dom 这个模块即可。
第二步：创建 Next.js 应用程序
以下是创建 Next.js 应用程序所需的步骤：
1. 为你的应用程序创建一个目录
mkdir next-app cd next-app
2. 初始化 npm 或者 yarn
npm init -y #使用 npm //or yarn init -y #使用 yarn
3. 安装必要的依赖项
npm install --save react react-dom next
4. 创建 pages 目录
在 Next.js 应用程序中，页面应该位于 pages 目录下。
mkdir pages
5. 创建 index.js
现在，让我们创建一个基本的主页。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- -------- - -- -- -
------ -
-----
-------- ------- ----------
------
--
--
------ ------- ---------6. 启动应用程序
现在，我们可以使用以下命令启动应用程序
npm run dev //or yarn dev
在浏览器中访问 http://localhost:3000/，应该可以看到 "欢迎来到 Next.js 应用程序！" 页面。
第三步：添加 React Router
1. 安装 React Router
npm install --save react-router-dom //or yarn add react-router-dom
2. 创建一个新的页面
让我们在 pages 目录下创建一个新页面，即我们将在应用程序上添加路由的页面。
touch pages/about.js
-- -------------------- ---- -------
------ ----- ---- --------
----- --------- - -- -- -
------ -
-----
-------------
------------------
------
--
--
------ ------- ----------3. 创建路由文件
让我们在项目根目录中创建一个新文件夹并添加一个名为 routes.js 的文件。此文件将包含我们的路由信息。稍后，我们将把它们链接到我们的应用程序。
-- -------------------- ---- -------
----- ------ -- ----- ---------
-- --------- --
------ -------- ---- ----------------
------ --------- ---- ----------------
----- ------ - -
-
----- ----
------ -----
---------- ---------
--
-
----- ------------
---------- ----------
--
--
------ ------- -------4. 将路由添加到应用程序
现在，我们已经有了一个路由文件和两个页面。让我们将路由添加到我们的 Next.js 应用程序中。
-- -------------------- ---- -------
-- -------------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ------ ---- ------------
-------- ------- ---------- --------- -- -
------ -
--------
--------
------------------- -- -
------
-----------------
-------------------
---------------------------
----------------
--
---
---------
---------
--
-
------ ------- ------现在我们已经可以在我们的 Next.js 应用程序中使用 React Router。访问 http://localhost:3000/about-us，你应该可以看到 "关于我们" 页面。
结论
React Router 是一个伟大的路由器工具，我们可以使用它轻松地在 Next.js 应用程序中添加路由特性。此外，在实现功能之前应该总是先考虑应用程序的体系结构。使用正确的工具和技术，可以使你的代码看起来更清晰和模块化。我希望这篇文章对你有所帮助，谢谢。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f1319b6fbf960197372fcb