React Router是React社区中最受欢迎的路由库之一。它提供了一种强大且灵活的方式来管理一个React应用程序中的URL。当您需要将一个多页面应用的URL映射到React组件树的某些部分时，React Router是一个不可缺少的工具。
在本文中，我们将介绍 React-Router5，这是React Router库的一个新版本。我们将深入了解React Router5的各种API，并给出一些使用React Router5的最佳实践。
安装 React-Router5
首先，我们需要安装React Router5，使用npm在终端或命令行工具中运行以下命令：
npm install react-router-dom@5.x.x
基础概念
在使用React Router5之前，您需要了解一些基本概念：
Route
React Router5中的 Route 组件定义了URL和React组件之间的映射关系。
例如，如果您想将URL路径/about与一个名为About的组件关联起来，您可以使用以下代码：
-- -------------------- ---- -------
------ - ----- - ---- -------------------
------ ----- ---- ----------
-------- ----- -
------ -
-----
------ ------------- ----------------- --
------
--
-这里需要注意的是 component 属性，并不是 props，需要另外引入。
具体来说，Route组件渲染一个React组件并将调用该组件的路由信息传递给该组件。
Link
React Router5中的 Link 组件用于在应用程序中导航到另一个URL。下面是一个例子：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ----- -
------ -
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
--
-这里注意 to 这个属性，给出的字符串参数就是导航到的路径。
Switch
React Router5中的 Switch 组件用于在一个或多个Route组件之间进行选择。当有多个路由匹配时，Switch从上到下遍历匹配的所有组件，找到第一个匹配的组件并呈现它。这是一个例子：
-- -------------------- ---- -------
------ - ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
------
--
-在上面的例子中，如果用户访问/about，则Route将通过Switch组件找到第一个匹配的组件（About）并呈现它。 如果用户访问/或/contact，则匹配相应的Route并呈现Home或Contact组件。
Redirect
React Router5中的 Redirect 组件用于重定向到另一个URL。例如，此代码将用户从/home重定向到/about：
-- -------------------- ---- -------
------ - --------- ----- - ---- -------------------
-------- ----- -
------ -
-----
------ ----- -------------
--------- ----------- --
--------
------ ------------- ----------------- --
------
--
-useParams
React Router5中的 useParams hook可以帮助您在React组件中获取URL参数的值。下面是一个例子：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
-------- ------------- -
----- - ------ - - ------------
------ -
-----
-------- ------------
------- --- ------------
------
--
-当你请求一个路径例如/user/123时，useParams hook 将{userId: 123}的对象传递给组件。然后，我们可以使用该对象中的值进行渲染。
API 分析
现在，我们将介绍React Router5的各种API并给出一些示例。
BrowserRouter 和 HashRouter
React Router5提供了两种类型的路由：BrowserRouter和 HashRouter。
BrowserRouter使用HTML5历史记录API来实现客户端导航，它需要一个支持历史记录API的现代浏览器。
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';HashRouter使用hash部分来实现导航，这种路由方法会兼容性更好。
import { HashRouter as Router, Link, Route } from 'react-router-dom';在这两种路由方式中，Router 是必须的，而 Link 和 Route 则代表了我们之前提到过的组件。
Route
React Router5中的 Route 组件可以接收以下props：
path：与URL路径匹配的字符串或正则表达式。exact：布尔值，表示是否需要严格匹配 path 和 pathname。strict：布尔值，表示是否启用严格模式。sensitive：布尔值，表示是否区分大小写。component：一个React组件，它将在与URL路径匹配时呈现。render：一个返回React元素的函数，可以根据需要进行自定义呈现。children：一个函数，返回一个React元素，无论路由是否匹配都会呈现。location：一个Location对象，用于与路由匹配。
-- -------------------- ---- -------
------ - ----- - ---- -------------------
-------- ----- -
------ -
-----
------ ----- -------- ---------------- --
------ ------------- ---------- -- ---------- --------- --
------ --------------- ------------ ----- -- -- ----- -- ------------ --------- --
------
--
-在上面的例子中，使用了不同的方式呈现Route组件。 exact 明确表示模糊匹配，而 render 和 children 函数的使用则可以更加灵活。
Link
React Router5中的 Link 组件可以接收以下props:
to：一个字符串或者 location 对象，表示要导航到的 URL。replace：一个布尔值，如果为true，则使用与 push 功能相同的导航，因此在历史记录中不会创建新条目，而是将当前条目替换为新条目。innerRef：一个回调函数，用于将 DOM 节点的引用传递给父组件。
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ----- -
------ -
-----
-----
----
----
----- ------------------
-----
----
----- ----------------- ---------
-----
----
----- --------------------- ---------
-----
-----
------
-- ------
------
--
-在上面的例子中，我们将 Link 标签与 to 属性组合在一起来创建导航链接。
Switch
React Router5中的 Switch 组件没有 props，它只是对 Route 组件进行包装，确保只呈现一个匹配的路由。
-- -------------------- ---- -------
------ - ------- ----- - ---- -------------------
-------- ----- -
------ -
-----
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
------
--
-在上面的例子中，使用了 Switch 来确保只有一个路由被呈现。
Redirect
React Router5中的 Redirect 组件可以接收以下props：
to：一个字符串或 location 对象，表示重定向到的 URL。push：一个布尔值，如果为true，则使用 push 功能来导航，否则使用类似于 replace 的功能。
-- -------------------- ---- -------
------ - --------- ----- - ---- -------------------
-------- ----- -
------ -
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ------------- ----------------- --
------ ------------------
------------ -- --------- ----------- ---
---------- --
--------
------
--
-在上面的示例代码中，如果用户未登录，则会将其重定向到 /login 路由。
useParams
React Router5中的 useParams hook可以用来接收URL参数的值。
-- -------------------- ---- -------
------ - --------- - ---- -------------------
-------- ------------- -
----- - ------ - - ------------
------ -
-----
-------- ------------
------- --- ------------
------
--
-在上面的示例代码中，我们使用useParams hook来查找传递给路由的URL参数。
总结
React Router5是一个非常强大的路由库，可以帮助您轻松地将URL映射到React组件树中的某些部分。在本文中，我们深入介绍了React Router5的各种API以及一些最佳实践，希望能够帮助您更好地使用React Router5来构建可扩展的Web应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e73617d4982a6ebf7ad40