随着 Web 应用程序的日益复杂，前端路由成为了一个很重要的部分。React Router 是一个流行的第三方库，它提供了一种灵活的方式来实现前端导航，使得单页应用程序（SPA）的管理更加容易。
安装 React Router
使用 React Router 库之前，需要先安装它。使用 npm 可以很容易地安装，只需要在终端中运行以下命令即可：
npm install react-router-dom
实现基本导航
下面我们将介绍如何在 React 应用程序中使用 React Router 来实现基本导航。
定义路由
首先，需要定义我们的路由。在 React Router 中，所有的路由都应该包裹在一个 <Router> 组件中。下面是一个简单的例子：
-- -------------------- ---- -------
------ - ------------- -- ------- ------- ----- - ---- -------------------
-------- ----- -
------ -
--------
-----
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
------
---------
--
-
-------- ------ -
------ --------------
-
-------- ------- -
------ ---------------
-
-------- --------- -
------ -----------------
-在上面的代码中，我们使用 React Router 提供的 <BrowserRouter> 组件来包裹我们的路由。然后，在 <div> 中，我们使用 <Switch> 来定义我们的路由。其中，我们使用 <Route> 组件来定义每一个路由，并指定对应的组件。
导航链接
当我们定义好了我们的路由之后，我们就可以在应用程序中使用链接来访问它们了。React Router 提供了 <Link> 和 <NavLink> 组件来实现导航链接。
下面是一个简单的例子：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ------------ -
------ -
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--
-在上面的代码中，我们通过 <Link> 组件来定义我们的导航链接。to 属性指定了我们要访问的路由路径。
实现页面导航
现在，当我们点击导航链接时，我们的应用程序将不再是传统的页面加载，而是使用 React Router 提供的导航功能来加载对应的组件。
嵌套路由
React Router 还提供了一种嵌套路由的方式来实现更加复杂的导航。
定义路由
下面是一个嵌套路由的例子：
-- -------------------- ---- -------
-------- ----- -
------ -
--------
-----
----------- --
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ---------------- -------------------- --
---------
------
---------
--
-
-------- ---------- -
------ -
-----
-----------------
--------
------ ----- ---------------- ----------------------- --
------ -------------------- ------------------- --
---------
------
--
-在上面的代码中，我们定义了一个路径为 /products 的路由，它包含了两个子路由 /products 和 /products/:id。当用户访问 /products 路径时，将展示所有产品的列表，而当用户访问 /products/:id 时，将根据产品的编号展示对应的产品详情。
链接
下面是一个链接到这个嵌套路由的例子：
<Link to="/products">Products</Link>
结论
React Router 是一个重要的前端库，它可以帮助我们更加灵活地管理前端路由。在本文中，我们介绍了 React Router 的基本使用方法和嵌套路由的实现。希望这篇文章能够帮助你更好地理解并掌握 React Router 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751685e8bd460d3ad896f55