React Router 是一个开源的 React 页面路由库，它提供了强大而灵活的组件，可以帮助我们在 React 应用程序中实现导航和页面跳转。
在 React Router 4 版本中，它有着完全不同于之前版本的设计思路和使用方式，本文将详细介绍 React Router 4 的使用方式和相关概念。
安装和使用
React Router 4 可以通过 NPM 安装：
npm install --save react-router-dom
React Router 4 包括三个主要组件：
BrowserRouter：使用 HTML5 history API 实现路由。Route：用来描述路径和对应的组件。Link：用户点击后跳转到对应的路径。
下面是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----------------
---------------
-----
----
--------- -----------------------
--------- -----------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
-----------------
-------------------------------
--在这个示例中，我们定义了两个组件：Home 和 About，并使用 BrowserRouter 组件包裹了所有的路由内容。Link 组件用于定义导航链接，Route 组件则用于定义路径和对应的组件。
路由匹配
React Router 4 中的路由匹配规则如下：
exact：精确匹配路径。strict：匹配路径时忽略末尾的斜杠。sensitive：路径区分大小写。
例如，<Route exact path="/about" component={About} /> 表示只有 /about 路径才会渲染 About 组件。
嵌套路由
React Router 4 支持嵌套路由，可以通过嵌套 Route 组件实现。
例如，下面这个示例中，我们定义了一个嵌套路由：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ------ ---- - ---- -------------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- ------ - -- ----- -- -- -
-----
---------------
----
--------- -------------------------------- -------------
--------- -------------------------------- -------------
-----
------ ------------------------------ ----------------- --
------ ----- ---------------- ---------- -- ---------- ------ - ------------ --
------
--
----- ----- - -- ----- -- -- ------------- ----- --- ----------------------------
----------------
---------------
-----
----
--------- -----------------------
--------- -----------------------------
--------- -------------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ -------------- ------------------ --
------
-----------------
-------------------------------
--在这个示例中，我们定义了一个 /topics 路径，用于渲染 Topics 组件。Topics 组件中嵌套了两个子路由，分别匹配 /topics/topic1 和 /topics/topic2 路径，并渲染 Topic 组件。
路由传参
React Router 4 允许通过 URL 传递参数，可以通过 match.params 属性获取传递过来的参数。
例如，在嵌套路由示例中，我们可以通过以下代码获取路径参数：
const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;路由过渡动画
React Router 4 并没有内置的过渡动画效果，但是可以通过 CSS 动画实现。
例如，我们可以定义以下样式：
-- -------------------- ---- ------- ----------- - -------- -- -------- -- - ----------------------------- - -------- -- ----------- ------- ----- -------- - ---------- - -------- -- - --------------------------- - -------- -- ----------- ------- ----- -------- -
然后，我们可以在路由组件中添加 TransitionGroup 和 CSSTransition 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ------ ----- ------ - ---- -------------------
------ - ---------------- ------------- - ---- -------------------------
------ --------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----------------
---------------
------ ---------- -------- -- -- -
-----
----
--------- -----------------------
--------- -----------------------------
-----
--- --
-----------------
-------------- ------------------ ------------- ------------------
------- --------------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
----------------
------------------
------
-- --
-----------------
-------------------------------
--在这个示例中，我们使用了 Switch 组件来包裹所有路由组件，然后在外层添加了 TransitionGroup 组件，用来管理路由组件的进入和离开动画。CSSTransition 组件定义了路由组件动画的相关样式和时间。
总结
React Router 4 是 React 中最常用的路由库之一，也是一个非常重要的技术栈点。本文详细介绍了 React Router 4 的使用方式和相关概念，包括安装和使用、路由匹配、嵌套路由、路由传参和路由过渡动画。希望本文可以为读者提供有价值的指导和学习意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479b840968c7c53b05b1818