介绍
React Router 是 React 应用程序中最受欢迎的路由库之一，它可以帮助开发人员管理应用程序中的所有路由。本文将介绍如何使用 npm 包 react-router 来构建响应式的前端路由。
安装
在开始使用 react-router 之前，必须先安装该包。您可以通过 npm 或 yarn 将其添加到项目中：
- --- --- ------- ---------------- - ---- ---- --- ----------------
基本用法
要在 React 应用程序中使用 react-router，需要先导入所需的组件和函数。通常情况下，我们会从 react-router-dom 包中导入以下组件：BrowserRouter、Route 和 Link。
接下来，我们可以在 JSX 中使用这些组件来定义应用程序的路由结构。例如，以下代码片段演示了如何使用 Route 组件和 Switch 组件来为路径 /about 和 /contact 创建两个不同的页面。
------ - -------------- ------ ------ - ---- -------------------
-------- ----- -
------ -
---------------
--------
------ --------------
------ --
--------
------ ----------------
-------- --
--------
---------
----------------
--
-
-------- ------- -
------ ---------------
-
-------- --------- -
------ -----------------
-在上面的代码中，BrowserRouter 组件将整个应用程序包装在一个 HTML5 history API 中。Switch 组件确保只有与当前路径匹配的第一个 Route 组件被呈现。Route 组件定义了 URL 路径，以及当路径匹配时要呈现的组件。
高级用法
React Router 还提供了许多高级功能，例如路由参数、嵌套路由和编程式导航。以下是一些示例代码：
路由参数
可以在 URL 中添加变量，并使用 Route 组件中的 props.match.params 对象来读取这些变量。例如，以下代码演示了如何使用路由参数来显示特定 ID 的用户详细信息。
-------- ----- -
------ -
---------------
--------
------ ------------------
----- --
--------
---------
----------------
--
-
-------- ------ -
--- - -- - - ------------
------ -------- --- ----------
-嵌套路由
可以在 React 应用程序中创建嵌套路由。例如，以下代码演示了如何在 /products 页面上显示产品列表，并在 /products/:id 页面上显示单个产品的详细信息。
-------- ---------- -
------ -
-----
-----------------
----
--------- ------------------------ -------------
--------- ------------------------ -------------
--------- ------------------------ -------------
-----
--------
------ ----- -----------------
---------- ------ - -------------
--------
------ ---------------------
-------- --
--------
---------
------
--
-
-------- --------- -
--- - -- - - ------------
------ ----------- --- ----------
-编程式导航
可以使用 history 对象进行编程式导航。例如，以下代码演示了如何在单击按钮时将用户重定向到 /about 页面。
-------- ----------- -
-------- ------------- -
-----------------------------
-
------ -
-----
-------------
------- ------------------------ -- --------------
------
--
-结论
React Router 是一个功能强大、易
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32210