React 是一个流行的前端框架，用于构建动态、交互性且高效的 Web 应用程序。在 React 中，路由是很重要的一部分，因为它可以帮助我们创建单页面应用程序（SPA） 以提供高性能的用户体验。
@jayphelps/react-router 是一个面向 React 的客户端路由管理工具，它能够帮助我们轻松地将应用程序的不同部分划分为不同的路由，从而实现单页应用程序的高效管理。
安装
npm install @jayphelps/react-router --save
导入
import {
BrowserRouter as Router,
Route,
Link
} from '@jayphelps/react-router-dom';其中，BrowserRouter 是react-router-dom提供的 react-router 实例，Route 和 Link 是由 react-router-dom 提供的模块。
基本用法
我们可以使用 Router 组件作为应用程序的最外层容器，并设置基础的路由：
import { Router, Route } from "@jayphelps/react-router";
const App = () => (
<Router>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);在这个例子中，我们使用 exact 属性来匹配根路由，避免匹配到其他路由。同时，我们还定义了 /about 路由，对应 About 组件。
当 exact 设置为 true 时，它仅匹配 path 与 location.pathname 完全匹配的路由。如果没有指定 exact，则会在路径被部分匹配时计算某个路由是启用的（例如，/ro和/romance均和/romance匹配）。
路由参数
有时，一个路由可能需要接收来自 URL 的参数。在 react-router 中，我们可以使用冒号 “:” 指示参数，如下所示：
import { Router, Route } from "@jayphelps/react-router";
const App = () => (
<Router>
<Route exact path="/" component={Home} />
<Route path="/users/:id" component={UserProfile} />
</Router>
);这个例子中，我们匹配了 UserProfile 组件，并向其传递了一个 id 属性，它的值是从 URL 中的参数中获得的。例如，如果 URL 是 /users/1，那么 id 将被设置为 1。
我们可以使用 props.match.params props 来访问这个参数，例如，通过使用 this.props.match.params.id 在 UserProfile 组件内访问该参数。例如：
const UserProfile = (props) => (
<div>
<h2>User Profile</h2>
<p>{props.match.params.id}</p>
</div>
)上面的代码输出了对应的参数。
嵌套路由
在某些情况下，我们可能需要在应用程序中嵌套多个路由。例如，我们可能需要在 /users 路由下面包含 /users/:id 路由。为了实现这样的嵌套路由，我们可以创建一个子 Router 组件。例如：
-- -------------------- ---- -------
------ - ------- ----- - ---- --------------------------
------ ----------- ---- ----------------
----- -------- - -- -- -
-----
-------- ---------
----
--------- ------------------ -------------
--------- ------------------ -------------
--------- ------------------ -------------
-----
------ ----------------- ----------------------- --
------
--
----- --- - -- -- -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ------------- -------------------- --
---------
--在这个例子中，我们定义了嵌套路由的“主”路由 /users，以及一个嵌套了的 UserProfile 组件。
路由导航
可以使用 <Link> 组件来创建从一个路由到另一个路由之间的导航链接。例如：
-- -------------------- ---- -------
------ - ---- - ---- ------------------------------
----- --- - -- -- -
-----
----- ------------------
----- ------------------------
----- ------------------------
------
--当用户单击链接时，它会立即导航到相应的路由。
处理404
处理 404 页面， 可以做如下修改
-- -------------------- ---- -------
------ - ------- ------ ------ - ---- --------------------------
------ ----------- ---- ----------------
------ -------- ---- ------------
----- -------- - -- -- -
-----
-------- ---------
--------
------ ----------------- ----------------------- --
------ ----------------------
---------
------
--
----- --- - -- -- -
--------
-----
----- ------------------
----- ------------------------
----- ------------------------
------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ------------- -------------------- --
------ ----------------------
---------
---------
--其中 Switch 组件会遍历 Route 组件， 使用 component 处理 404 页面展示.
这就是 @jayphelps/react-router 的基本用法，了解更多相关信息可以查看 react-router 的官方文档，或者阅读源代码以深入了解其实现方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e2443aa