介绍
React Router是一个用于在React应用程序中实现导航的库。它提供了一种使得URL和组件之间进行映射的方式，使用户能够通过浏览器地址栏中的URL访问不同的页面。React Router支持多种路由器，包括HashRouter, BrowserRouter, MemoryRouter和NativeRouter等。
本文主要介绍通过npm包react-router-dom来实现路由操作的方法。
安装React Router
首先，我们需要安装React Router。在命令行中输入以下命令：
npm install react-router-dom
配置路由
在项目中新建路由文件，并在其中进行路由配置。我们可以通过下列代码创建两个路由：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
---------
--
-
------ ------- ----这里我们引入了BrowserRouter、Route和Switch，其中BrowserRouter是React Router中提供的路由容器，Route是路由规则，Switch会在匹配到第一个路由时停止匹配。exact属性表示路径严格相等才匹配。
路由跳转
在应用程序中，我们可以通过Link组件或编程式导航来实现路由跳转。
Link组件
Link组件是React Router提供的导航组件，它可以将页面的不同部分链接在一起。我们可以通过下列代码创建一个Link：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ------ -
------ -
-----
-------------
----
--------- -----------------------------
-----
------
--
-
------ ------- -----这里我们引入了Link组件，并使用to属性指定要跳转到的路径。
编程式导航
在某些情况下，我们需要在代码中进行路由跳转，而非通过用户操作触发。React Router提供了history对象来实现编程式导航。我们可以通过下列代码实现编程式导航：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
-------- ------ -
----- ------- - -------------
-------- ------------- -
-----------------------
-
------ -
-----
-------------
------- ------------------------ -- ----- -------------
------
--
-
------ ------- -----这里我们引入了useHistory钩子函数，并使用push方法实现跳转。
路由传参
在某些情况下，我们需要将数据从一个页面传递到另一个页面。React Router支持通过URL参数、查询参数和状态来实现路由传参。
URL参数
URL参数是指在URL中以/:param的形式传递参数。我们可以通过下列代码获取URL参数：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
-------- ------ -
----- - -- - - ------------
------ -
-----
-------- ---------
------
--
-
------ ------- -----这里我们引入了useParams钩子函数，并使用{id}来获取URL参数。
查询参数
查询参数是指在URL中以?key=value的形式传递参数。我们可以通过下列代码获取查询参数：
-- -------------------- ---- -------
------ ----------- ---- ---------------
-------- -------- -
----- - ------ - - --------------
----- - - - - --------------------------
------ -
-----
----------- --------
------
--
-
------ ------- -------这里我们引入了queryString库来解析查询参数，使用useLocation钩子函数获取当前路由的location对象，从而获取
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32211