React 是一种用于构建用户界面的 JavaScript 库，通过使用组件化的方式进行开发，提高了代码的复用性和可维护性。React Router 是 React 的一个扩展，可以让我们实现单页应用程序（SPA）的页面导航。在这篇文章中，我们将介绍如何使用 React Router 实现页面导航，并提供一些示例代码和指导意义。
React Router 的工作原理
React Router 是一种基于 React 的路由解决方案，可以帮助我们实现 SPA 应用程序的页面导航。在 React Router 中，我们可以定义路由器和路由。路由器是一个组件，用于将页面导航链接和页面内容关联起来，而路由则定义了我们希望在 URL 中出现的路径和对应的组件。
React Router 会根据 URL 进行匹配，如果 URL 匹配到我们定义的某个路由，则会显示相应的组件。一旦页面组件加载，React Router 将会更新 URL 并确保 URL 与当前显示的组件相匹配。
实现 React 路由
安装 React Router
在开始使用 React Router 之前，我们需要先安装它。我们可以使用 npm 命令进行安装：
npm install react-router-dom
创建路由组件
在 React Router 中，我们使用 BrowserRouter 组件来在应用程序中添加路由器。路由器包含着路由，并监听 URL 更改。在 BrowserRouter 中，我们可以使用 Route 组件定义我们的路由。
下面是一个简单的 BrowserRouter 组件：
-- -------------------- ---- -------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
-
------ ------- ----在上面的代码中，我们定义了一个使用 BrowserRouter 的 App 组件。BrowserRouter 组件使用了 Route 组件来定义我们的路由，exact 属性用于匹配精准路由。在这个例子中，我们定义了三个路由：
/对应着Home组件/about对应着About组件/contact对应着Contact组件
创建路由对应的组件
我们已经在应用程序中定义了路由，现在我们需要创建每个路由对应的组件。下面是一个简单的 Home 组件：
import React from "react";
function Home() {
return <h2>Welcome to our website!</h2>;
}
export default Home;同理，我们也需要为 /about 和 /contact 这两个路由创建对应的组件。
处理路由链接
我们已经定义了路由和对应的组件，现在需要在应用程序中添加路由链接来实现页面跳转。React Router 提供了 Link 组件，可以用来创建路由链接。
下面是一个简单的 Header 组件，在这个组件中我们使用了 Link 组件来实现页面跳转：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- -------- -
------ -
----
----
----- ------------------
-----
----
----- ----------------- ---------
-----
----
----- --------------------- ---------
-----
-----
--
-
------ ------- -------在上面的代码中，我们使用 Link 组件来创建路由链接，to 属性用于指定我们要跳转到的路由。当用户点击链接时，React Router 将会自动更新 URL 并加载对应的组件。
结论
在这篇文章中，我们学习了如何使用 React Router 实现页面导航，并提供了一些示例代码和指导意义。React Router 是 React 应用程序中必不可少的一部分，它可以帮助我们创建 SPA 应用程序，并提供了很多高级的功能，如路由嵌套、路由守卫等。希望通过这篇文章，您可以更好地掌握 React Router 的知识，并能够轻松地在 React 应用程序中使用路由系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674edf68e884a3e30f2a9a67