前言
Next.js 是一个基于 React 的服务端渲染框架，React Router 是 React 的路由库。在使用 Next.js 开发应用时，我们会遇到需要在应用中使用 React Router 的情况。本文介绍如何在 Next.js 应用中使用 React Router 4.0。
安装
在开始之前，需要先安装 React Router 4.0 和 Next.js。可以使用以下命令安装：
npm install react-router-dom next
配置
在 Next.js 中使用 React Router 4.0 需要进行一些配置。首先，在 pages 目录下创建一个名为 _app.js 的文件，并在文件中引入 React 和 React Router：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- -------------------
------ ------- -------- ----- ---------- --------- -- -
------ -
---------------
---------- -------------- --
----------------
--
-然后，在 pages 目录下创建一个名为 _document.js 的文件，并在文件中引入 React、React Router 和 Next.js 的 Document 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- - ----- ----- ----- ---------- - ---- ----------------
------ - ---------------- - ---- --------------------
------ - ----------------- - ---- ---------------------------
------ - ---------------- -- ------------------------ - ---- --------------------
----- ---------- ------- -------- -
------ ----- -------------------- -
----- ----- - --- -------------------
----- ------------- - --- ---------------------------
----- ------ - --- --------------------
----- ------------------ - ---------------
--- -
-------------- - -- --
--------------------
----------- --- -- ----- --
------------------------------------------------------------------- ---------- ------
---
----- ------------ - ----- ------------------------------
------ -
----------------
------- -
--
---------------------
-------------------------
---------------------------------
--------------------------
---
--
--
- ------- -
-------------
---------------------
-
-
-------- -
------ -
----- ----------
----- --
------
----- --
----------- --
-------
-------
--
-
-
------ ------- -----------最后，在 pages 目录下创建一个名为 index.js 的文件，并在文件中使用 React Router：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ------ ------ - ---- -------------------
------ ------- -------- ------ -
------ -
--
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--------
------ --------------
--------------
--------
------ ---------
-------------
--------
---------
---
--
-在上面的代码中，我们使用 Link 组件来创建导航链接，使用 Route 组件来定义路由匹配规则，使用 Switch 组件来组合路由规则。
总结
本文介绍了如何在 Next.js 应用中使用 React Router 4.0。首先，我们需要安装 React Router 4.0 和 Next.js。然后，我们需要进行一些配置，包括创建 _app.js 和 _document.js 文件，并在 index.js 文件中使用 React Router。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6611240dd10417a2221d4355