React-Router 是 React.js 官方推荐的一款路由库，用于实现单页应用程序的路由功能。本教程将详细介绍如何在 React 单页应用程序中使用 React-Router，并给出相关的示例代码。
安装 React-Router
使用 React-Router 首先需要安装相关的依赖包。可以通过 npm 或者 yarn 来安装，示例代码使用的是 npm。
npm install react-router-dom
React-Router 基础概念
在使用 React-Router 之前，需要了解一些基础概念。
- HashRouter 和 BrowserRouter
React-Router 提供了两种路由方式：HashRouter 和 BrowserRouter。其中，HashRouter 使用 URL 的 hash 部分来作为路由的标识符，而 BrowserRouter 则使用浏览器的 HTML5 history API 来实现路由。
在大多数情况下，使用 HashRouter 就可以满足需求，而使用 BrowserRouter 需要在服务器端进行相关配置。
- Route
Route 组件是 React-Router 中最核心的组件，用于声明一个路由规则。当 URL 匹配该规则时，Route 会将对应的组件渲染到页面上。
Route 组件有以下属性：
- path：路由规则对应的 URL 路径；
- component：对应的组件；
- exact：是否需要精确匹配，默认为 false；
- strict：是否严格匹配路径结尾斜杠，如 /path 和 /path/ 是否被认为是同一个路径，默认为 false；
- sensitive：是否大小写敏感，默认为 false。
- Link
Link 组件用于定义一个链接，它与普通的 标签不同的是，它可以通过 React-Router 实现客户端内部路由。当 Link 被点击时，React-Router 会根据 path 属性跳转到对应的页面。
Link 组件有以下属性：
- to：链接要跳转到的路径。
- Switch
Switch 组件用于包裹多个 Route 组件，只会渲染第一个与当前 URL 匹配的 Route 组件，其他未匹配到的 Route 组件将不会被渲染。
示例代码
下面给出一个简单的示例代码，展示如何在 React 单页应用程序中使用 React-Router。
App.js
首先创建 App.js 文件，定义一个基本的 Hello World 组件。
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
--------- -----------
--
-
------ ------- ----index.js
然后创建 index.js 文件，使用 React-Router 定义路由规则。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- ------ ----- ------ - ---- -------------------
------ --- ---- --------
-- ------
-------- ------ -
------ -
----------- ----------
--
-
-------- ------- -
------ -
--------- -------
--
-
----------------
------------
-----
----
--------- -----------------------
--------- ----------------- --------------
-----
------
--------
------ ----- -------- --------------- --
------ ------------- ----------------- --
------ ---------------- --
---------
--------------
-------------------------------
--在这个示例代码中，我们定义了两个组件：Home 和 About。使用 Link 组件创建导航菜单，向 Home 组件和 About 组件分别对应不同的路由规则。
使用 Switch 包裹多个 Route 组件，并设置 exact 属性为 true，保证只有当 URL 完全匹配时才会渲染对应的组件。如果 URL 都不匹配，就会渲染 Route 组件中没有 path 属性的组件，即 Home 组件。
在浏览器中打开 http://localhost:3000，即可看到一个基本的单页应用程序，实现了简单的路由切换效果。
总结
本教程介绍了 React-Router 在 React 单页应用程序中的使用方式，并给出了相关示例代码。通过学习本教程，您可以快速了解如何使用 React-Router 实现单页应用的路由功能，为您的项目提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462e1c1968c7c53b03f0a5e