简介
React Router 是 React 社区中最流行的路由工具，它可以帮助我们在 React 应用程序中实现客户端路由。react-router-plus 这个 npm 包是基于 React Router 实现的增强版，提供了更多的功能，并且使用起来非常方便。
在本文中，我们将会详细介绍 react-router-plus 的使用方法，包括安装，配置以及基本 API 的使用。
安装
首先，我们需要通过 npm 安装 react-router-plus，可以使用如下命令：
npm install react-router-plus --save
配置
在开始使用 react-router-plus 之前，我们需要先配置一个 Router 组件。React Router 中提供了两种类型的 Router：BrowserRouter 和 HashRouter。其中 BrowserRouter 使用 HTML5 History API，而 HashRouter 使用 URL 的哈希部分。
下面是一个简单的配置：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- --------------------
----- --- - -- -- -
--------
---- ----------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ -------------------- --
---------
------
---------
--在上面的代码中，我们使用 BrowserRouter，在 Router 中包含了 Switch 和多个 Route，同时我们为每个 Route 指定了对应的组件。
基本 API
<Switch>
在 Router 中，<Switch> 组件是一个特殊的路由器，它只渲染在路径和当前位置匹配的第一个子节点。这就意味着，只有一个子节点会被渲染，且该子节点是匹配到的第一个 Route 组件。
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>在上面的代码中，当访问 "/" 路径时，将会渲染 Home 组件，如果访问 "/about" 路径，则渲染 About 组件。
<Route>
<Route> 组件是 React Router 中最基础的组件，它可以匹配一个路径，并将相应的组件渲染出来。
<Route path="/about" component={About} />在上面的代码中，当访问 "/about" 路径时，将会渲染 About 组件。
参数传递
在 React Router 中，我们可以通过 URL 的参数来传递数据到组件中。为了在组件中接收 URL 参数，我们需要使用 {match} 对象。
<Route
path="/user/:username"
render={({ match }) => (
<User username={match.params.username} />
)}
/>在上面的代码中，我们使用 :username 来指定参数名，在 User 组件中使用 match.params.username 来获取传递的参数。
重定向
有时候我们希望访问一个页面时自动跳转到另一个页面，可以使用重定向功能。
<Redirect from="/old-path" to="/new-path" />
在上面的代码中，当访问 "/old-path" 路径时，将会自动跳转到 "/new-path" 路径。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- --------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------- - -- -- -----------------
----- -------- - -- -- ------- --- -----------
----- ---- - -- -------- -- -- ---------- -----------------
----- --- - -- -- -
--------
---- ----------------
----
------ ----------------------
------ ----------------------------
------ --------------------------------
------ ---------------------- ------------
------ ------------------------ --------------
-----
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
----------------------
---------- ----- -- -- -
----- -------------------------------- --
--
--
------ -------------------- --
---------
------
---------
--
------ ------- ----在上面的代码中，我们使用了 Router、Switch、Route、Redirect 组件，展示了如何实现基本的路由和参数传递。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005589e81e8991b448d5e7b