React Router 是一个 React 的第三方库，它提供了强大的路由控制功能，可以帮助我们在 React 应用中实现页面跳转、参数传递、嵌套路由等功能。本文将介绍如何使用 React Router 实现路由控制，并提供示例代码。
安装 React Router
首先，我们需要安装 React Router。在命令行中输入以下命令：
npm install react-router-dom
创建路由组件
接下来，我们需要创建一个路由组件，用于管理应用的路由。在 src 目录下创建一个名为 AppRouter.js 的文件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ -------- ---- -------------
----- --------- - -- -- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ -------------------- --
---------
---------
--
--
------ ------- ----------在这个文件中，我们使用了 BrowserRouter、Route 和 Switch 组件。BrowserRouter 是一个高阶组件，它会将 URL 解析成一个对象，并将该对象传递给 Route 组件。Route 组件根据 URL 匹配对应的组件进行渲染。Switch 组件用于包裹所有的 Route 组件，它会按照顺序匹配 URL，只渲染第一个匹配成功的组件。
在这个例子中，我们定义了三个 Route 组件，分别对应了应用的三个页面：Home、About 和 NotFound。exact 属性用于确保 URL 完全匹配。如果没有匹配到任何路由，就会渲染 NotFound 组件。
创建页面组件
接下来，我们需要创建三个页面组件，分别对应了应用的三个页面。在 src 目录下创建三个文件：Home.js、About.js 和 NotFound.js。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
------ -
-----
-------------
---------- -- -- ------------
------
--
--
------ ------- ------- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- -- -
------ -
-----
--------------
------- -- --- ----- ---------
------
--
--
------ ------- -------- -------------------- ---- -------
------ ----- ---- --------
----- -------- - -- -- -
------ -
-----
------- --- ----------
------ ---- --- --------- ----- --- -- ----------
------
--
--
------ ------- ---------这些页面组件非常简单，只是简单的渲染了一些文本内容。
渲染路由组件
最后，在 src/index.js 中渲染 AppRouter 组件。代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import AppRouter from './AppRouter';
ReactDOM.render(<AppRouter />, document.getElementById('root'));现在我们就完成了一个简单的应用，可以在浏览器中访问 http://localhost:3000 查看效果。
总结
React Router 是一个非常实用的库，可以帮助我们实现复杂的路由控制功能。在本文中，我们学习了如何使用 React Router 实现路由控制，并提供了示例代码。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66255472f76562e4b391e651