13、React Router
最后更新于：2022-04-02 06:08:48
在网络工程中，路由能保证信息从源地址传输到正确地目的地址，避免在互联网中迷失方向。而前端应用中的路由，其功能与之类似，也是保证信息的准确性，只不过来源变成URL，目的地变成HTML页面。
在传统的前端应用中，每个HTML页面都会对应一条URL地址，当访问某个页面时，会先请求服务器，然后服务器根据发送过来的URL做出处理，再把响应内容回传给浏览器，最终渲染整个页面。这是典型的多页面应用的访问过程，由服务器控制页面的路由，而其中最令人诟病的是整页刷新，不仅存在着资源的浪费（像导航栏、侧边栏等通用部分不需要每次加载），并且让用户体验也变得不再流畅。
为了弥补多页面应用的不足，有人提出了另一种网站模型：单页面应用（Single Page Application，简称SPA）。SPA类似于一个桌面应用程序，能根据URL分配控制器（即由JavaScript负责路由），动态加载适当的内容到页面中，减少与服务器之间的通信次数，不再因为页面切换而打断用户体验。虽然名称中包含“单页”两字，但浏览器中的URL地址还是会发生改变，在视觉上与多页面保持同步。而实现SPA的关键就是路由系统，在React的技术栈中，官方给出了支持的路由库：React Router，后文将会着重分析该库。
当然，SPA也存在着自身的缺陷，例如不利于SEO、增加开发成本等，使用与否还是得看具体项目。
## 一、版本
在2015年的11月，官方发布了React Router的第一个版本，实现了声明式的路由。随后在2016年，主版本号进行了两次升级，一次是在2月的v2；另一次是在10月的v3。v3能够兼容v2，删除了一些会引起警告的弃用代码，在未来只修复错误，所有的新功能都被添加到了2017年3月发布的v4版本中。
v4不能兼容v3，在内部完全重写，推崇组件式应用开发，放弃了之前的静态路由而改成动态路由的设计思路。所谓静态路由是指事先定义好一堆路由配置，在应用启动时，再将其加载，从而构建出一张路由表，记录URL和组件之间的映射关系。虽然v4版本精简了许多API，降低了学习成本，但是增加了项目升级的难度。
目前最新的版本已到v5，但官方团队本来只是想发布v4.4版本。由于人为的操作失误，导致不得不撤销v4.4，直接改成v5，因此其API能完全兼容v4.x版本。React Router被拆分成了4个库（包），如表3所列。
:-: 
:-: 表3 React Router的四个库
当运行在浏览器环境中时，只需要安装react-router-dom即可。因为react-router-dom会依赖react-router，所以默认就能使用react-router提供的API。
v5版本的React Router提供了三大类组件：路由器、路由和导航，将它们组合起来就能实现一套完整的路由系统，如图11所示。首先根据URL导航到路由器中相应的路由，然后再渲染出指定的组件。
:-: 
图11 路由系统
## 二、路由器
Router是React Router提供的基础路由器组件，一般不会直接使用。在浏览器运行环境中，通常引用的是封装了Router的高级路由器组件：BrowserRouter或HashRouter。以BrowserRouter为例，其部分源码如下所示。
~~~
class BrowserRouter extends React.Component {
history = createBrowserHistory(this.props);
render() {
return
~~~
**1）history**
每个路由器组件都会创建一个history对象，由它来管理会话历史。history不但会监听URL的变化，还能将其解析成location对象，触发路由的匹配和相应组件的渲染。
history有三种形式，各自对应一种创建函数，应用于不同的路由器组件，具体如表4所示。其中MemoryRouter适用于非浏览器环境，例如React Native。
:-: 
:-: 表4 history的三种形式
history会将浏览过的页面组织成有序的堆栈，无论使用哪种history，其属性和方法大部分都能保持一致。表5列出了history通用的API。
:-: 
:-: 表5 history的属性和方法
~~~
{
key: "z4ihbf", //唯一标识
pathname: "/libs/d.html" //路径和文件名
search: "?page=1", //查询字符串
hash: "#form", //锚点
state: { //状态对象
count: 10
}
}
~~~
**2）BrowserRouter**
此组件会通过HTML5提供的History来保持页面和URL的同步，其创建的URL格式如下所示。
~~~
http://pwstrick.com/page.html
~~~
如果使用BrowserRouter组件，那么需要服务器配合部署。以上面的URL为例，当页面刷新时，浏览器会向服务器请求根目录下的page.html，但根本就没有这个文件，于是页面就会报404的错误。若要避免这种情况，就需要配置Web服务器软件（例如Nginx、自建的Node服务器等），具体参数的配置可参考网上的资料。
BrowserRouter组件包含5个属性，接下来将一一讲解。
（1）basename属性用于设置根目录，URL的首部需要一个斜杠，而尾部则省略，例如“/pwstrick”，如下所示。
~~~
~~~
**3）HashRouter**
此组件会通过window.location.hash来保持页面和URL的同步，其创建的URL格式比较特殊，需要包含井号（#），如下所示。
~~~
http://pwstrick.com/#/page.html
~~~
在使用HashRouter时，不需要配置服务器。因为服务器会忽略锚点（即#/page.html），只会处理锚点之前的部分，所以刷新上面的URL也不会报404的错误。
HashRouter组件包含4个属性，其中3个与BrowserRouter组件相同，分别是basename、children和getUserConfirmation。独有的hashType属性用来设置hash类型，有三个关键字可供选择，如下所列。
（1）slash：默认值，井号后面跟一个斜杠，例如“#/page”。
（2）noslash：井号后面没有斜杠，例如“#page”。
（3）hashbang：采用Google风格，井号后面跟感叹号和斜杠，例如“#!/page”。
## 三、路由
Route是一个配置路由信息的组件，其职责是当页面的URL能匹配Route组件的path属性时，就渲染出对应的组件，而渲染方式有三种。接下来会讲解Route组件的属性、渲染方式以及其它的相关概念。
**1）路径**
与路径相关的属性有3个，分别是path、exact和strict，接下来会一一讲解。
（1）path是一个记录路由匹配路径的属性，当路由器是BrowserRouter时，path会匹配location中的pathname属性；而当路由器是HashRouter时，path会匹配location中的hash属性。
path属性的值既可以是普通字符串，也可以是能被path-to-regexp解析的正则表达式。下面是一个示例，如果没有特殊说明，默认使用的路由器是BrowserRouter。
~~~
{
return Strick
}}/>
~~~
（3）children属性的值也是一个返回React元素的内联函数，它的一大特点是无论路由是否匹配成功，这个函数都会被调用，该属性的工作方式与render属性基本一致。注意，当匹配不成功时，props的match属性的值为null。
不要将3个渲染属性应用于同一个Route组件，因为三种渲染方式有先后顺序，component的优先级最高，其次是render，最后是children。
三个路由属性除了match之外，另外两个location和history已在前文做过讲解，接下来将重点分析match属性。
Route会将路由匹配后的信息记录到match对象中，然后将此对象作为props的match属性传递给被渲染的组件。match对象包含4个属性，在表8中，不仅描述了各个属性的作用，还在第三列记录了点击read链接后，各个属性被赋的值。
~~~
read
~~~
Switch的子元素既可以是Route，也可以是Redirect。其中Route元素匹配的是path属性，而Redirect元素匹配的是from属性。
**4）嵌套路由**
从v4版本开始，嵌套路由不再通过多个Route组件相互嵌套实现，而是在被渲染的组件中声明另外的Route组件，以这种方式实现嵌套路由。下面用一个例子来演示嵌套路由，首先用Switch组件包裹两个Route组件，第一个只有当处在根目录时才会渲染Main组件，第二个路径匹配成功渲染的是Children组件。
~~~
~~~
然后定义Children组件，它也包含一个Route组件，从而形成了嵌套路由。注意，其路径读取了match对象的path属性，通过沿用父路由中要匹配的路径，可减少许多重复代码。
~~~
let Children = (props) => {
return CSS类
内联样式
~~~
然后是exact和strict，两个布尔属性的功能可分别参考Route元素的exact和strict，它们的用法相同。如果将exact和strict设为true（如下代码所示），那么匹配规则会改变，其中前者要路径完全匹配，后者得符合strict的路径匹配规则。只有当匹配成功时，才能将activeClassName或activeStyle属性的值赋予元素。
~~~
完全
斜杠
~~~
接着是函数类型的isActive属性，此函数能接收2个对象参数：match和location，返回一个布尔值。在函数体中可添加路径匹配时的额外逻辑，当返回值是true时，才能赋予元素定义的匹配样式。注意，无论匹配是否成功，isActive属性中的函数都会被回调一次，因此如果要使用match参数，那么需要做空值判断（如下代码所示），以免出错。
~~~
let fn = (match, location) => {
if (!match) {
return false
}
return match.url.indexOf("article") >= 0;
};
函数
~~~
最后是两个特殊功能的属性：location和aria-current，前者是一个用于比对的location对象；后者是一个为存在视觉障碍的用户服务的ARIA属性，用于标记屏幕阅读器可识别的导航类型，例如页面、日期、位置等。可供选择的关键字包括page、step、location、date、time和true，默认值为page。
**3）Redirect**
此组件用于导航到一个新地址，类似于服务端的重定向（HTTP的状态码为3XX），其属性如表9所示。
:-: 
:-: 表9 Redirect元素的属性
Redirect可与Switch搭配使用，如下代码所示，当URL与“/main”匹配时，重定向到“/page”，并渲染Page组件。
~~~
~~~
## 五、集成Redux
[第11篇](https://www.cnblogs.com/strick/p/10775503.html)中对Redux做过详细讲解，本节将通过一个示例分三步来描述React Router集成Redux的过程，第一步是创建Redux的三个组成部分：Action、Reducer和Store，如下所示。
~~~
function caculate(previousState = {digit: 0}, action) { //Reducer
let state = Object.assign({}, previousState);
switch (action.type) {
case "ADD":
state.digit += 1;
break;
case "MINUS":
state.digit -= 1;
}
return state;
}
function add() { //Action创建函数
return {type: "ADD"};
}
let store = createStore(caculate); //Store
~~~
**1）withRouter**
在说明第二步之前，需要先了解一下React Router提供的一个高阶组件：withRouter。它能将history、location和match三个路由对象传递给被包装的组件，其中match对象来自于离它最近的父级Route组件的match属性。
正常情况下，只有Route要渲染的组件（例如下面的List）会自带这三个对象，但如果List组件还有一个子组件，那么这个子组件就无法自动获取到这三个对象了，除非显式地传递。
~~~
;
ReactDOM.render(Router, document.getElementById("container"));
~~~
*****
> 原文出处：
[博客园-React躬行记](https://www.cnblogs.com/strick/category/1455720.html)
[知乎专栏-React躬行记](https://zhuanlan.zhihu.com/pwreact)
已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。
';
1
2
文章内容
; }; ~~~ 当pathname的属性值是“/list/article/1”时，就能成功渲染出Article组件。 ## 四、导航 当需要在页面之间进行切换时，就该轮到Link、NavLink和Redirect三个导航组件登场了。其中Link和NavLink组件最终会被解析成HTML中的元素。 **1）Link** 当点击Link组件时会渲染匹配路由中的组件，并且能在更新URL时，不重载页面。它有两个属性：to和replace，其中to属性用于定义导航地址，其值的类型既可以是字符串，也可以是location对象（包含pathname、search等属性），如下所示。 ~~~ 字符串 对象 ~~~ replace是一个布尔属性，默认值为false，当设为true时，能用新地址替换掉会话历史里的原地址。 **2）NavLink** 它是一个封装了的Link组件，其功能包括定义路径匹配成功后的样式、限制匹配规则、优化无障碍阅读等，接下来将依次讲解多出的属性。 首先是activeClassName和activeStyle，两个属性都会在路径匹配成功时，赋予元素样式（如下代码所示）。其中前者定义的是CSS类，默认值为“active”；后者定义的是内联样式，书写规则可参照React元素的style属性。 ~~~
列表
);
}
}
let List = (props) => {
return