什么是 React Router？
React Router 是 React 的官方路由库，用于帮助我们构建单页应用程序。它允许我们在 React 应用程序中定义视图之间的导航，并在浏览器地址栏、浏览器历史记录等方面进行正确地同步。
安装 React Router
使用 npm 来安装 React Router：
npm install react-router-dom
配置 React Router
首先，我们需要在我们的应用程序中导入 React Router：
import { BrowserRouter, Route, Switch } from 'react-router-dom';接下来，我们需要在应用程序的根组件中使用 BrowserRouter 和 Switch 组件来包装我们的路由。
-- -------------------- ---- -------
-------- ----- -
------ -
---- ----------------
---------------
--------
--- ---- ---
---------
----------------
------
--
-
------ ------- ----接下来，我们需要在 Switch 组件中添加 Route 组件以定义我们的路由。例如，我们可以给我们的应用程序添加两个路由：
-- -------------------- ---- -------
-------- ----- -
------ -
---- ----------------
---------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
----------------
------
--
-
------ ------- ----这将为我们的应用程序配置两个路由，一个是 /，一个是 /about。
在上面的代码中，我们使用了 exact 关键字来确保只在访问根路径时展示 Home 组件。
接下来，我们需要创建 Home 和 About 组件。这两个组件可以是任何 React 组件，通常用来渲染页面内容。
-- -------------------- ---- -------
-------- ------ -
------ -
-----
-------------
---------- -- --- ---- ---------
------
--
-
-------- ------- -
------ -
-----
--------------
---------- -- --- ----- ---------
------
--
-现在，我们已经完成了 React Router 的基本配置，我们可以使用这两个简单的示例页面来测试路由是否正确。
动态路由
有时候我们需要创建更复杂的路由，例如动态路由，可以根据不同的参数来显示不同的内容。
React Router 允许我们通过 :id 等占位符来创建动态路由。例如，我们可以根据用户的 ID 来显示不同的用户信息：
-- -------------------- ---- -------
-------- ----- -
------ -
---- ----------------
---------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ----------------- ---------------- --
---------
----------------
------
--
-
-------- ------ ----- -- -
------ -
-----
-------- ----------------------
---------- -- --- ---- ---------
------
--
-在上面的代码中，我们使用了 :id 占位符来创建动态路由，并在 User 组件中使用了 match.params.id 来获取用户 ID。
嵌套路由
有时，我们需要在应用程序中创建嵌套路由，例如，在账户页面中，我们可能需要显示用户的资料、账单和订单等信息。
对于嵌套路由，我们只需要在父级路由组件中添加子路由组件即可。例如：
-- -------------------- ---- -------
-------- --------- -
------ -
-----
----------------
----
----
----- ------------------------------------
-----
----
----- ------------------------------------
-----
----
----- ----------------------------------
-----
-----
--------
------ ----------------------- ------------------- --
------ ----------------------- ------------------- --
------ ---------------------- ------------------ --
---------
------
--
-
-------- ----- -
------ -
---- ----------------
---------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ----------------- ---------------- --
------ --------------- ------------------- --
---------
----------------
------
--
-在上面的代码中，我们在 Account 组件中定义了三个子路由，并在 /account 路由中引用了 Account 组件。
使用 Link 渲染导航链接
React Router 还提供了 Link 组件来渲染导航链接。例如，我们可以在 App 组件中添加导航列表：
-- -------------------- ---- -------
-------- ----- -
------ -
---- ----------------
---------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ----------------- ---------------- --
------ --------------- ------------------- --
---------
----------------
------
--
-在上面的代码中，我们使用了 Link 组件来渲染导航链接，并在 to 属性中指定要跳转的路径。
结论
React Router 是一个非常强大的路由库，可以帮助我们构建单页应用程序。本文为大家介绍了如何在 React 应用程序中配置 React Router，并介绍了一些高级用法，例如动态路由和嵌套路由等。希望这篇无痛入门教程可以帮助你快速掌握 React Router 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4d9c4c5c563ced565f62e