React躬行记（13）——React Router

　　在网络工程中，路由能保证信息从源地址传输到正确地目的地址，避免在互联网中迷失方向。而前端应用中的路由，其功能与之类似，也是保证信息的准确性，只不过来源变成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	提供核心的路由组件、对象与函数
react-router-dom	提供浏览器所需的特定组件
react-router-native	提供React Native所需的特定组件
react-router-config	提供静态路由的配置

　　当运行在浏览器环境中时，只需要安装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 <Router history={this.history} children={this.props.children} />;
  }
}

　　在v4.x的版本中，路由器组件可以包裹任意类型的子元素，但数量只能是一个，而在v5.0版本中已经解除了这个限制。下面的BrowserRouter组件包含了两个子元素，如果将其执行于v4.x中，那么将抛出错误。

<BrowserRouter>
  <div>1</div>
  <div>2</div>
</BrowserRouter>

1）history

　　每个路由器组件都会创建一个history对象，由它来管理会话历史。history不但会监听URL的变化，还能将其解析成location对象，触发路由的匹配和相应组件的渲染。

　　history有三种形式，各自对应一种创建函数，应用于不同的路由器组件，具体如表4所示。其中MemoryRouter适用于非浏览器环境，例如React Native。

表4  history的三种形式

形式	创建函数	路由器组件
browserHistory	createBrowserHistory()	BrowserRouter
hashHistory	createHashHistory()	HashRouter
memoryHistory	createMemoryHistory()	MemoryRouter

　　history会将浏览过的页面组织成有序的堆栈，无论使用哪种history，其属性和方法大部分都能保持一致。表5列出了history通用的API。

表5  history的属性和方法

属性和方法	描述
length	堆栈长度
action	执行的动作，例如PUSH、REPLACE等
location	一个对象，保存着当前页面的状态和URL信息，形式如下代码所示，其中state属性来自于push()或replace()的state参数。注意，在hashHistory中没有key和state属性
push(path, [state])	在栈顶添加一条新的页面记录
replace(path, [state])	替换当前的页面记录
go(number)	跳转到指定页
goBack()	上一页，相当于go(-1)
goForward()	下一页，相当于go(1)
block(prompt)	阻止跳转

{
  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”，如下所示。

<BrowserRouter basename="/pwstrick" />
<Link to="/article" />                //渲染为<a href="/pwstrick/article">

　　（2）forceRefresh是一个布尔属性，只有当浏览器不支持HTML5的History时，才会设为true，从而可刷新整个页面。

　　（3）keyLength属性是一个数字，表示location.key的长度。

　　（4）children属性保存着组件的子元素，这是所有的React组件都自带的属性。

　　（5）getConfirmation属性是一个确认函数，可拦截Prompt组件，注入自定义逻辑。以下面代码为例，当点击链接企图离开当前页面时，会执行action()函数，弹出里面的确认框，其提示就是Prompt组件message属性的值，只有点击确定后才能进行跳转（即导航）。

const action = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}
<BrowserRouter getUserConfirmation={action}>
  <div>
    <Prompt message="确认要离开吗？" />
    <Link to="page.html">首页</Link>
  </div>
</BrowserRouter>

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。

<Route path="/main" component={Main} />
<Route path="/list/:page+" component={List} />

　　第一个Route组件能匹配“/main”或以“/main”为前缀的pathname属性，下面两条URL能正确匹配。

http://www.pwstrick.com/main
http://www.pwstrick.com/main/article

　　第二个Route组件能匹配以“/list”为前缀的pathname属性，下面两条URL只能匹配第二条。

http://www.pwstrick.com/list
http://www.pwstrick.com/list/1

　　React Router内部依赖了path-to-regexp库，此库定义了一套正则语法，例如命名参数、修饰符（*、+或?）等，具体规则可参考官方文档，本文不做展开。

　　在“/list/:page+”中，带冒号前缀的“:page”是命名参数，类似于一个函数的形参，可以传递任何值；正则末尾的加号要求至少匹配一个命名参数，没有命名参数就匹配失败。

　　注意，如果省略path属性，那么路由将总是匹配成功。

　　（2）exact是一个布尔属性，当设为true时，路径要与pathname属性完全匹配，如表6所示。

表6  exact属性匹配说明

路径	pathname属性	exact属性	是否匹配
/main	/main/article	true	否
/main	/main/article	false	是

　　（3）strict也是一个布尔属性，当设为true时，路径末尾如果有斜杠，那么pathname属性匹配到的部分也得包含斜杠。在表7的第三行中，虽然pathname属性的末尾没有斜杠，但是依然能正确匹配。

表7  strict属性匹配说明

路径	pathname属性	strict属性	是否匹配
/main/	/main	true	否
/main/	/main/	true	是
/main/	/main/article	true	是

　　如果将strict和exact同时设为true，那么就可强制pathname属性的末尾不能包含斜杠。例如pathname属性的值为“/main/”，路径为“/main”，此时匹配会失败。

2）渲染方式

　　Route组件提供了3个用来渲染组件的属性：component、render和children，每个属性对应一种渲染方式，每种方式传递的props都会包含3个路由属性：match、location和history。

　　（1）component属性的值是一个组件（如下代码所示），当路由匹配成功时，会创建一个新的React元素（调用了React.createElement()方法）。

<Route path="/name" component={Name} />

　　如果组件以内联函数的方式传给component属性，那么会产生不必要的重新挂载。对于内联渲染，可以用render属性替换。

　　（2）render属性的值是一个返回React元素的内联函数，当路由匹配成功时，会调用这个函数，此时可以传递额外的参数进来，如下代码所示。由于React元素不会被反复创建，因此不会出现重新挂载的情况。

<Route path="/name" render={(props) => {
  return <Name {...props} age="30">Strick</Name>
}}/>

　　（3）children属性的值也是一个返回React元素的内联函数，它的一大特点是无论路由是否匹配成功，这个函数都会被调用，该属性的工作方式与render属性基本一致。注意，当匹配不成功时，props的match属性的值为null。

　　不要将3个渲染属性应用于同一个Route组件，因为三种渲染方式有先后顺序，component的优先级最高，其次是render，最后是children。

　　三个路由属性除了match之外，另外两个location和history已在前文做过讲解，接下来将重点分析match属性。

　　Route会将路由匹配后的信息记录到match对象中，然后将此对象作为props的match属性传递给被渲染的组件。match对象包含4个属性，在表8中，不仅描述了各个属性的作用，还在第三列记录了点击read链接后，各个属性被赋的值。

<Link to="/list/article/1">read</Link>
<Route path="/list/:type" component={Name} />

表8  match对象的属性

属性	描述	示例中的值
params	由路径的参数名和解析URL匹配到的值组成的对象	{type: "article"}
isExact	是否完全匹配，等同于Route的exact属性	false
path	要匹配的路径，等同于Route的path属性	"/list/:type"
url	匹配到的URL部分	"/list/article"

3）Switch

　　如果将一堆Route组件放在一起（如下代码所示），那么会对每个Route组件依次进行路由匹配，例如当前pathname的属性值是“/age”，那么被渲染的组件是Age1和Age3。

<Route path='/' component={Age1} />
<Route path='/article' component={Age2} />
<Route path='/:list' component={Age3} />

　　而如果将这三个Route用Switch组件包裹（如下代码所示），那么只会对第一个路径匹配的组件进行渲染。

<Switch>
  <Route path='/' component={Age1} />
  <Route path='/article' component={Age2} />
  <Route path='/:list' component={Age3} />
</Switch>

　　Switch的子元素既可以是Route，也可以是Redirect。其中Route元素匹配的是path属性，而Redirect元素匹配的是from属性。

4）嵌套路由

　　从v4版本开始，嵌套路由不再通过多个Route组件相互嵌套实现，而是在被渲染的组件中声明另外的Route组件，以这种方式实现嵌套路由。下面用一个例子来演示嵌套路由，首先用Switch组件包裹两个Route组件，第一个只有当处在根目录时才会渲染Main组件，第二个路径匹配成功渲染的是Children组件。

<Switch>
  <Route exact path='/' component={Main} />
  <Route path='/list/:article' component={Children} />
</Switch>

　　然后定义Children组件，它也包含一个Route组件，从而形成了嵌套路由。注意，其路径读取了match对象的path属性，通过沿用父路由中要匹配的路径，可减少许多重复代码。

let Children = (props) => {
  return <Route path={`${props.match.path}/:id`} component={Article} />;
};
let Article = (props) => {
  return <h5>文章内容</h5>;
};

　　当pathname的属性值是“/list/article/1”时，就能成功渲染出Article组件。

四、导航

　　当需要在页面之间进行切换时，就该轮到Link、NavLink和Redirect三个导航组件登场了。其中Link和NavLink组件最终会被解析成HTML中的<a>元素。

1）Link

　　当点击Link组件时会渲染匹配路由中的组件，并且能在更新URL时，不重载页面。它有两个属性：to和replace，其中to属性用于定义导航地址，其值的类型既可以是字符串，也可以是location对象（包含pathname、search等属性），如下所示。

<Link to="/main">字符串</Link>
<Link to={{pathname: "/main", search: "?type=1"}}>对象</Link>

　　replace是一个布尔属性，默认值为false，当设为true时，能用新地址替换掉会话历史里的原地址。

2）NavLink

　　它是一个封装了的Link组件，其功能包括定义路径匹配成功后的样式、限制匹配规则、优化无障碍阅读等，接下来将依次讲解多出的属性。

　　首先是activeClassName和activeStyle，两个属性都会在路径匹配成功时，赋予元素样式（如下代码所示）。其中前者定义的是CSS类，默认值为“active”；后者定义的是内联样式，书写规则可参照React元素的style属性。

<style>
  .btn {
    color: blue;
  }
</style>
<NavLink to="/list" activeClassName="btn">CSS类</NavLink>
<NavLink to="/list" activeStyle={{color: "blue"}}>内联样式</NavLink>

　　然后是exact和strict，两个布尔属性的功能可分别参考Route元素的exact和strict，它们的用法相同。如果将exact和strict设为true（如下代码所示），那么匹配规则会改变，其中前者要路径完全匹配，后者得符合strict的路径匹配规则。只有当匹配成功时，才能将activeClassName或activeStyle属性的值赋予元素。

<NavLink to="/list" exact>完全</NavLink>
<NavLink to="/list" strict>斜杠</NavLink>

　　接着是函数类型的isActive属性，此函数能接收2个对象参数：match和location，返回一个布尔值。在函数体中可添加路径匹配时的额外逻辑，当返回值是true时，才能赋予元素定义的匹配样式。注意，无论匹配是否成功，isActive属性中的函数都会被回调一次，因此如果要使用match参数，那么需要做空值判断（如下代码所示），以免出错。

let fn = (match, location) => {
  if (!match) {
    return false
  }
  return match.url.indexOf("article") >= 0;
};
<NavLink to="/list" isActive={fn}>函数</NavLink>

　　最后是两个特殊功能的属性：location和aria-current，前者是一个用于比对的location对象；后者是一个为存在视觉障碍的用户服务的ARIA属性，用于标记屏幕阅读器可识别的导航类型，例如页面、日期、位置等。可供选择的关键字包括page、step、location、date、time和true，默认值为page。

3）Redirect

　　此组件用于导航到一个新地址，类似于服务端的重定向（HTTP的状态码为3XX），其属性如表9所示。

表9  Redirect元素的属性

属性	描述
to	重定向的目标地址，既可以是字符串，也可以是location对象
from	要重定向的路径，只有匹配成功时，才能跳转到to属性中的目标地址
push	布尔属性，当设为true时，重定向的新地址将会加入到会话历史中

　　Redirect可与Switch搭配使用，如下代码所示，当URL与“/main”匹配时，重定向到“/page”，并渲染Page组件。

<Switch>
  <Redirect from="/main" to="/page" />
  <Route path="/page" component={Page} />
</Switch>

五、集成Redux

　　第11篇中对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组件还有一个子组件，那么这个子组件就无法自动获取到这三个对象了，除非显式地传递。

<Route path="/" component={List} />

　　在使用withRouter后，就能避免逐级传递。并且当把withRouter应用于react-redux库中的connect()函数后（如下代码所示），就能让函数返回的容器组件监听到路由的变化。

withRouter(connect(...)(MyComponent))

2）路由

　　第二步就是创建路由，并自定义三个组件：Btn、List和Article。在Btn组件中声明了Link和Route两个组件，其中路由匹配成功后会渲染List组件；在List组件中声明了WithArticle组件，而WithArticle就是通过withRouter包装后的Article组件。

class Btn extends React.Component {
  render() {
    return (
      <div>
        <Link to="/list">列表</Link>
        <Route path="/list" component={List} />
        <button onClick={this.props.add}>提交</button>
      </div>
    );
  }
}
let List = (props) => {
  return <WithArticle content="内容"/>;
};
let Article = (props) => {
  const { match, location, history } = props;
  return <h5>{props.content}</h5>;
};
let WithArticle = withRouter(Article);    //withRouter包装后的Article组件

3）渲染

　　第三步就是用react-redux库中的Provider组件包裹BrowserRouter组件（即连接路由器），并注入Store，最后将众组件渲染到页面中。

let Smart = connect(state => state, { add })(Btn);        //容器组件
let Router = <Provider store={store}>
  <BrowserRouter>
    <Smart />
  </BrowserRouter>
</Provider>;
ReactDOM.render(Router, document.getElementById("container"));