前言
React-Router 是一个用于 React 应用的路由库。它可以帮助我们在单页应用中管理路由，并且可以支持动态路由、嵌套路由、路由传参等功能。本文将介绍 React-Router4.x 的环境搭建及 spa 应用开发。
环境搭建
安装 React 和 React-DOM
React-Router 是基于 React 和 React-DOM 的，所以我们需要先安装这两个库。可以通过 npm 安装：
--- ------- ----- --------- ------
安装 React-Router
React-Router4.x 与之前的版本相比有了很大的改动，所以我们需要安装最新版本的 React-Router。可以通过 npm 安装：
--- ------- ---------------- ------
配置 Webpack
在使用 React-Router 的时候，我们需要使用 Webpack 来打包应用。需要在 Webpack 配置文件中添加以下代码：
-------------- - -
-- ---
---------- -
------------------- -----
--
--这段代码的作用是让 Webpack 在开发模式下支持 HTML5 History API。
使用 React-Router
基本用法
React-Router 的基本用法是通过 <Router> 组件包裹整个应用，并使用 <Route> 组件来定义路由规则。下面是一个简单的示例：
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
-
------ ------- ----在这个示例中，我们定义了三个路由规则，分别对应了三个组件：Home、About 和 Contact。exact 属性表示只有在路径完全匹配时才会渲染对应的组件。
嵌套路由
React-Router 支持嵌套路由，我们可以在一个组件中定义子路由规则。下面是一个示例：
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
-----
----
--------- -----------------------
--------- -----------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------------- ------------------- --
------
---------
--
-
------ ------- ----在这个示例中，我们定义了一个嵌套路由规则，即 /about/contact。当用户访问该路径时，会渲染 Contact 组件。
路由传参
React-Router 还支持路由传参。我们可以通过 URL 参数或者查询参数来传递数据。下面是一个示例：
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
-----
----
--------- -----------------------
--------- -----------------------------
--------- ------------------------------------- ----------------
--------- ------------------------------------- ----------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------------- ------------------- --
------
---------
--
-
------ ------- ----在这个示例中，我们定义了两个链接，分别传递了不同的查询参数。在 Contact 组件中，我们可以通过 this.props.location.search 来获取查询参数。
总结
本文介绍了 React-Router4.x 的环境搭建及 spa 应用开发。通过本文的学习，我们可以掌握 React-Router 的基本用法、嵌套路由和路由传参等功能。希望本文对大家的学习和开发有所帮助。完整示例代码请参考 GitHub。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663aa133d3423812e48b56c1