1. 前言
在现代 Web 开发中，前端路由（Front-end Router）成为了一个重要的组成部分。它使得 Web 应用变得更加灵活，更加可控，从而为用户提供更好的用户体验。
React.js 是当前最流行的前端框架之一，而 reactjs-router（也称为 React Router）则是在 React.js 上构建的一个流行的路由框架。
本文将介绍 reactjs-router 的一些基本使用，帮助初学者快速入门，并提供一些深入讲解和实践经验。
2. 安装
安装 React Router 可以使用 npm，命令如下：
npm install react-router-dom --save
这里我们安装了 react-router-dom 包，它是用于 Web 应用的一个封装。
3. 基本用法
React Router 主要由三部分组成：Router、Route 和 Link。通过这三个组件的组合，我们可以在应用中实现无刷新的页面跳转、动态路由等功能。
3.1 Router
React Router 中最重要的组件是 Router。它是一个容器，我们可以把 Route 放到容器中，从而实现页面跳转。在 React Router 中，有两种不同的 Router：HashRouter 和 BrowserRouter。
HashRouter 使用 URL 的 hash 来实现路由，而 BrowserRouter 使用 HTML5 的 history API 来实现路由，前者针对现代浏览器和 IE 10 以上的浏览器，后者则针对较老的浏览器。
以下是 HashRouter 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ---------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- -
-----
-------------
------
--
----- ----- - -- -- -
-----
--------------
------
--
----- --- - -- -- -
--------
-----
-----
----
--------- -----------------------
--------- -----------------------------
-----
------
------ ----- -------- ------------------
------ ------------- -------------------
------
---------
--
----------- --- ---------------------------------注意，我们通过 import 语句从 react-router-dom 包引入了 Router、Route 和 Link 组件。同时，我们在 App 组件中将这三个组件结合起来，形成了一个应用。
3.2 Route
Route 组件用来匹配 URL 和要渲染的组件。你可以通过 path 属性来指定 URL，可以通过 component 属性来指定要渲染的 React 组件。
Route 组件在渲染时会根据 URL 的变化进行匹配。如果当前 URL 符合 Route 指定的对应 URL，Route 就会渲染对应的组件，否则 Route 就不会进行渲染。此外，Route 还支持一些特殊的属性，例如 exact 和 strict，它们可以对 URL 进行更精准的匹配。
<Route exact path="/" component={Home}/>3.3 Link
Link 是一个 React 组件，它与传统的链接（如 a 标签）相似，但它不会刷新页面，而是会使用 JavaScript 来更新 URL。通过 Link 组件，我们可以在应用中实现页面跳转。
<li><Link to="/">Home</Link></li>
4. 路由组件详解
除了上述基本用法外，React Router 还提供了很多高级的用法，例如嵌套路由、动态路由等等。在本节中，我们将探讨这些用法。
4.1 嵌套路由
在很多情况下，我们需要构建一个复杂的应用，包含了多个不同的模块。这时候，我们可以使用嵌套路由来对 URL 进行更细粒度的管理。嵌套路由可以让我们在一个页面中实现多个不同的 Route，从而形成一个更加完整的应用。以下是嵌套路由的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- -
-----
-------------
------
--
----- ----- - -- -- -
-----
--------------
------
--
----- ------ - -- ----- -- -- -
-----
---------------
----
----
----- ------------------------------
--------- ---- -----
-------
-----
----
----- -------------------------------
----------
-------
-----
----
----- ----------------------------------
----- -- -----
-------
-----
-----
------ ------------------------------- -------------------
------ ----- ----------------- ---------- -- -
---------- ------ - -----------
----
------
--
----- ----- - -- ----- -- -- -
-----
-------------------------------
------
--
----- --- - -- -- -
--------
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- -------------------------------
-----
------
------ ----- -------- ------------------
------ ------------- -------------------
------ -------------- --------------------
------
---------
--
----------- --- ---------------------------------我们通过 Topics 组件实现了一个嵌套路由，内部包含了三个不同的 Route。其中路径为 /topics/rendering、/topics/components 和 /topics/props-v-state 的 URL 将被匹配到 Topic 组件上。
4.2 动态路由
动态路由是指路径是根据 URL 中的参数来匹配的路由，例如 /posts/1 和 /posts/2 都是根据动态参数的格式来匹配的。在 React Router 中，可以通过 :param 的方式来指定参数。
<Route path="/posts/:id" component={Post}/>可以看到，我们在路径中使用了 :id 的形式来定义动态参数。React Router 会自动将这个参数匹配到对应的组件上。
const Post = ({ match }) => (
<div>
<h3>Post {match.params.id}</h3>
</div>
);同时，组件中的参数可以通过 match 参数访问到。在 match 对象中，params 属性可以访问到所有的动态参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0e81e8991b448d8b53