React Router 是一个用于处理在单页应用中跳转页面的工具。在 React 应用中，React Router 可以帮助我们管理页面之间的跳转，使得应用可以快速、灵活地响应用户的操作。本文将介绍如何在 React 应用中使用 React Router，包括如何进行配置、如何编写路由和跳转组件以及如何处理路由参数。
配置 React Router
要使用 React Router，首先需要安装它：
npm install react-router-dom
在应用的根组件中，需要导入 Router 和 Route 组件，然后编写路由配置：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
-------- ----- -
------ -
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
---------
--
-
------ ------- ----在这个例子中，我们配置了两个路由，分别对应着两个组件：Home 和 About。当用户在浏览器中输入应用的根路径或者 /about 路径时，React Router 会渲染对应的组件。
编写路由和跳转组件
在 React Router 中，每个路由都需要指定一个路径和一个组件。我们可以通过 Route 组件来配置路由。如果要传递路由参数，可以在路径中使用占位符，例如：
<Route exact path="/users/:id" component={User} />在这个例子中，我们使用了占位符 :id，来表示路由参数。当用户访问 /users/123 时，React Router 会将参数 “123” 传递给 User 组件。
在跳转页面时，我们可以使用 Link 组件来生成链接。例如：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ------ -
------ -
-----
-------------
----
--------- -----------------------------
--------- -------------------- ---------------
-----
------
--
-在这个例子中，我们通过 Link 组件生成了两个链接，分别跳转到 /about 和 /users/123。这样用户就可以通过点击链接来跳转页面了。
处理路由参数
当需要传递路由参数时，可以通过 Props 来获取参数值。例如，在 User 组件中可以这样获取路由参数：
function User(props) {
const userId = props.match.params.id;
// 根据 userId 加载用户数据
// ...
}在这个例子中，我们通过 props.match.params.id 来获取路由参数。这个参数值是字符串类型，我们可以用它来加载对应的用户数据。
总结
React Router 是一个非常实用的工具，在 React 应用中使用它可以方便地管理页面路由和跳转。本文介绍了如何在 React 应用中配置和使用 React Router，并提供了示例代码。如果你正在开发一个 React 应用，不妨试试使用 React Router 来实现路由功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fc4ae48841e9894c1ffa0