React Router 是 React 的一部分，它是 React 对于路由管理的一个支持库。React Router 可以帮助开发者管理应用中的路由，使其更加友好和易于调试。
在本文中，我们将介绍 React Router 的基本概念，并提供一些示例代码，帮助您学习如何在 React 中使用它进行路由控制。
路由的基本概念
在 React 中，路由的基本概念非常简单：每个路由都对应一个特定的组件。当用户进入应用程序的某个页面时，React Router 会呈现对应的组件。
例如，当用户在浏览器中访问 /home 路径时，我们可以设置一个路由，使其呈现 Home 组件。这可以通过 React Router 实现。
安装 React Router
要在 React 中使用 React Router，您首先需要在您的项目中安装它。您可以使用 npm 进行安装：
npm install react-router-dom
或者，如果您使用 yarn：
yarn add react-router-dom
安装后，您需要将 React Router 引入您的项目：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';使用 React Router 进行路由控制
React Router 允许您使用不同的路由类型，例如：
<Route>：呈现一个组件，当浏览器访问一个特定路径时<Link>：用于将用户导航到其他页面<Switch>：只呈现第一个与当前 URL 匹配的<Route>
使用 React Router 进行路由控制有多种方式。我们将使用最常见的方式：在 App.js 文件中创建一个路由组件，并将其指向其他组件。
以下是一些示例代码，演示如何使用 React Router 对不同的组件进行路由控制：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--------
------ --------------
------ --
--------
------ ----------------
-------- --
--------
------ ---------
----- --
--------
---------
------
---------
--
-在上面的代码中，我们首先导入了 BrowserRouter、Route、Switch 组件以及三个组件 Home、About 和 Contact。然后我们创建了一个包含 <nav> 和 <Switch> 组件的路由组件。这个组件还包含了三个 <Link> 组件，用于向用户显示导航链接。
最后，我们在 <Switch> 组件内部使用了三个 <Route> 组件，以便将特定的组件呈现给用户。
总结
React Router 是 React 中一种非常强大和灵活的路由管理方案。通过本文，您了解了 React Router 的基本概念以及如何在 React 中使用它进行路由控制。
在您的下一个 React 项目中，使用 React Router 帮助您创建更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462c44e968c7c53b03dcb48