深入理解react-router@4.0 使用和源码解析

如果你已经是一个正在开发中的react应用，想要引入更好的管理路由功能。那么，react-router是你最好的选择~

react-router版本现今已经到4.0.0了，而上一个稳定版本还是2.8.1。相信我，如果你的项目中已经在使用react-router之前的版本，那一定要慎重的更新，因为新的版本是一次非常大的改动，如果你要更新，工作量并不小。

这篇文章不讨论版本的变化，只是讨论一下react-router4.0的用法和源码。

源码在这里：https://github.com/reacttraining/react-router

1.准备

只需要在你的react app中引入一个包yarn add react-router-dom@next

注:react-router-dom是对react-router的作了一些小升级的库，代码基于react-router

2.使用

我们直接上例子：

import react from 'react'
import {browserrouter as router,route,link} from 'react-router-dom'

const basic = () => (
 <router>
 <div>
  <ul>
  <li><link to="/">home</link></li>
  <li><link to="/page1">page1</link></li>
  <li><link to="/page2">page2</link></li>
  </ul>

  <hr/>

  <route exact path="/" component={home}/>
  <route path="/page1" component={page1}/>
  <route path="/page2" component={page2}/>
 </div>
 </router>
)

跟之前的版本一样，router这个组件还是一个容器，但是它的角色变了，4.0的router下面可以放任意标签了，这意味着使用方式的转变，它更像redux中的provider了。通过上面的例子相信你也可以看到具体的变化。而真正的路由通过route来定义。link标签目前看来也没什么变化，依然可以理解为a标签，点击会改变浏览器url的hash值，通过route标签来捕获这个url并返回component属性中定义的组件，你可能注意到在为"/"写的路由中有一个exact关键字，这个关键字是将"/"做唯一匹配，否则"/"和"/xxx"都会匹配到path为"/"的路由，制定exact后，"/page1"就不会再匹配到"/"了。如果你不懂，动手试一下~

通过route路由的组件，可以拿到一个match参数，这个参数是一个对象，其中包含几个数据：

1. isexact：刚才已经说过这个关键字，表示是为作全等匹配
2. params:path中包含的一些额外数据
3. path:route组件path属性的值
4. url:实际url的hash值
   

我们来实现一下刚才的page2组件：

const page2 = ({ match }) => (
 <div>
 <h2>page2</h2>
 <ul>
  <li>
  <link to={`${match.url}/branch1`}>
   branch1
  </link>
  </li>
  <li>
  <link to={`${match.url}/branch2`}>
   branch2
  </link>
  </li>
  <li>
  <link to={`${match.url}/branch3`}>
   branch3
  </link>
  </li>
 </ul>

 <route path={`${match.url}/:branchid`} component={branch} />
 <route exact path={match.url} render={() => (
  <h3>default information</h3>
 )} />
 </div>
)

const branch = ({ match }) => {
 console.log(match);
 return (
 <div>
  <h3>{match.params.branchid}</h3>
 </div>
 )
}

很简单，动手试一试。需要注意的就只有route的path中冒号":"后的部分相当于通配符，而匹配到的url将会把匹配的部分作为match.param中的属性传递给组件，属性名就是冒号后的字符串。

3.router标签

细心的朋友肯定注意到了上面的例子中我import的router是browserrouter，这是什么东西呢？如果你用过老版本的react-router，你一定知道history。history是用来兼容不同浏览器或者环境下的历史记录管理的，当我跳转或者点击浏览器的后退按钮时，history就必须记录这些变化，而之前的react-router将history分为三类。

1. hashhistory 老版本浏览器的history
2. browserhistory h5的history
3. memoryhistory node环境下的history，存储在memory中
   

4.0之前版本的react-router针对三者分别实现了createhashhistory、createbrowserhistory和create memoryhistory三个方法来创建三种情况下的history，这里就不讨论他们不同的处理方式了，好奇的可以去了解一下~
到了4.0版本，在react-router-dom中直接将这三种history作了内置，于是我们看到了browserrouter、hashrouter、memoryrouter这三种router，当然，你依然可以使用react-router中的router，然后自己通过createhistory来创建history来传入。

react-router的history库依然使用的是 https://github.com/reacttraining/history

4.route标签

在例子中你可能注意到了route的几个prop

1. exact: proptype.bool
2. path: proptype.string
3. component: proptype.func
4. render: proptype.func

他们都不是必填项，注意，如果path没有赋值，那么此route就是默认渲染的。

route的作用就是当url和route中path属性的值匹配时，就渲染component中的组件或者render中的内容。

当然，route其实还有几个属性，比如location，strict,chilren 希望你们自己去了解一下。

说到这，那么route的内部是怎样实现这个机制的呢？不难猜测肯定是用一个匹配的方法来实现的，那么route是怎么知道url更新了然后进行重新匹配并渲染的呢？

整理一下思路，在一个web 应用中，改变url无非是2种方式，一种是利用超链接进行跳转，另一种是使用浏览器的前进和回退功能。前者的在触发link的跳转事件之后触发，而后者呢？route利用的是我们上面说到过的history的listen方法来监听url的变化。为了防止引入新的库，route的创作者选择了使用html5中的popstate事件，只要点击了浏览器的前进或者后退按钮，这个事件就会触发，我们来看一下route的代码：

class route extends component {
 static proptypes: {
 path: proptypes.string,
 exact: proptypes.bool,
 component: proptypes.func,
 render: proptypes.func,
 }

 componentwillmount() {
 addeventlistener("popstate", this.handlepop)
 }

 componentwillunmount() {
 removeeventlistener("popstate", this.handlepop)
 }

 handlepop = () => {
 this.forceupdate()
 }

 render() {
 const {
  path,
  exact,
  component,
  render,
 } = this.props

 //location是一个全局变量
 const match = matchpath(location.pathname, { path, exact })

 return (
  //有趣的是从这里我们可以看出各属性渲染的优先级，component第一
  component ? (
  match ? react.createelement(component, props) : null
  ) : render ? ( // render prop is next, only called if there's a match
  match ? render(props) : null
  ) : children ? ( // children come last, always called
  typeof children === 'function' ? (
   children(props)
  ) : !array.isarray(children) || children.length ? ( // preact defaults to empty children array
   react.children.only(children)
  ) : (
    null
   )
  ) : (
    null
   )
 )
 }
}

这里我只贴出了关键代码，如果你使用过react，相信你能看懂，route在组件将要mount的时候添加popstate事件的监听，每当popstate事件触发，就使用forceupdate强制刷新，从而基于当前的location.pathname进行一次匹配，再根据结果渲染。

ps：现在最新的代码中，route源码其实是通过componentwillreceiveprops中setstate来实现重新渲染的，match属性是作为route组件的state存在的.

那么这个关键的matchpath方法是怎么实现的呢？
route引入了一个外部library：path-to-regexp。这个pathtoregexp方法用于返回一个满足要求的正则表达式，举个例子：

let keys = [],keys2=[]
let re = pathtoregexp('/foo/:bar', keys)
//re = /^\/foo\/([^\/]+?)\/?$/i keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }] 

let re2 = pathtoregexp('/foo/bar', keys2)
//re2 = /^\/foo\/bar(?:\/(?=$))?$/i keys2 = []

关于它的详细信息你可以看这里:

值得一提的是matchpath方法中对匹配结果作了缓存，如果是已经匹配过的字符串，就不用再进行一次pathtoregexp了。

随后的代码就清晰了：

const match = re.exec(pathname)

if (!match)
 return null

const [ url, ...values ] = match
const isexact = pathname === url

//如果exact为true，需要pathname===url
if (exact && !isexact)
 return null

return {
 path, 
 url: path === '/' && url === '' ? '/' : url, 
 isexact, 
 params: keys.reduce((memo, key, index) => {
 memo[key.name] = values[index]
 return memo
 }, {})
}

5.link

还记得上面说到的改变url的两种方式吗，我们来说说另一种，link，看一下它的参数：

static proptypes = {
 onclick: proptypes.func,
 target: proptypes.string,
 replace: proptypes.bool,
 to: proptypes.oneoftype([
  proptypes.string,
  proptypes.object
 ]).isrequired
}

onclick就不说了，target属性就是a标签的target属性，to相当于href。

而replace的意思跳转的链接是否覆盖history中当前的url，若为true,新的url将会覆盖history中的当前值，而不是向其中添加一个新的。

handleclick = (event) => {
 if (this.props.onclick)
 this.props.onclick(event)

 if (
 !event.defaultprevented && // 是否阻止了默认事件
 event.button === 0 && // 确定是鼠标左键点击
 !this.props.target && // 避免打开新窗口的情况
 !ismodifiedevent(event) // 无视特殊的key值，是否同时按下了ctrl、shift、alt、meta
 ) {
 event.preventdefault()

 const { history } = this.context.router
 const { replace, to } = this.props

 if (replace) {
  history.replace(to)
 } else {
  history.push(to)
 }
 }
}

需要注意的是，history.push和history.replace使用的是pushstate方法和replacestate方法。

6.redirect

我想单独再多说一下redirect组件，源码很有意思：

class redirect extends react.component {
 //...省略一部分代码

 isstatic() {
 return this.context.router && this.context.router.staticcontext
 }

 componentwillmount() {
 if (this.isstatic())
  this.perform()
 }

 componentdidmount() {
 if (!this.isstatic())
  this.perform()
 }

 perform() {
 const { history } = this.context.router
 const { push, to } = this.props

 if (push) {
  history.push(to)
 } else {
  history.replace(to)
 }
 }

 render() {
 return null
 }
}

很容易注意到这个组件并没有ui，render方法return了一个null。很容易产生这样一个疑问，既然没有ui为什么react-router的创造者依然选择将redirect写成一个组件呢？

我想我们可以从作者口中的"just components api"中窥得原因吧。

希望这篇文章可以帮助你更好的创建你的react应用.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。