正文

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

webnote  webnote  2022-09-24  323

关键词：

如果你已经是一个正在开发中的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 [email protected]
注: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参数，这个参数是一个对象，其中包含几个数据：

isExact：刚才已经说过这个关键字，表示是为作全等匹配
params:path中包含的一些额外数据
path:Route组件path属性的值
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分为三类。

hashHistory 老版本浏览器的history
browserHistory h5的history
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

exact: propType.bool
path: propType.string
component: propType.func
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 = []

关于它的详细信息你可以看这里:https://github.com/pillarjs/path-to-regexp

值得一提的是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应用.

文章来自 http://www.jianshu.com/p/27ee7df4ccc1

react-router4.0版本使用笔记

react-router4变化还是挺大的，看网上很多人遇到问题，都是基本用法的改变，所以这里记录一下。http://www.jianshu.com/p/d6727e8d81c41.react-router4.0升级不少内容，详细可看官网https://reacttraining.com/react-router/web/api/Route/Route-render-methods2.安... 查看详情

react-router4.0history报错

react-router更新到了4.0，很多API已经不一样了。history被纳入了react-router-dom文件下的HashRouter、BrowserRouter等。使用4.0版到react-router网站了解下新API，或者仍想按原来方式，可以安装旧版的react-router。这两天准备用react写个新项目... 查看详情

react-router4.0学习笔记

1、安装react-router-dom 2、页面上要使用的时候要引入　import{BrowserRouterasRouter,Route,Link}from‘react-router-dom‘3、使用的时候要在外层包一个<Router>　　4、查看详情

react-router4.0升级攻略

react-router4.0出来好9了，项目在4月份的时候对react-router进行了升级，升级耗费了3天，一个坑一个坑踩了过来。按照公司项目情况说下升级改了哪些，项目使用的是hashHistory，（BrowserHistory的情况就不清... 查看详情

react-router 4.0、react-router-dom 和 react-router-redux 有啥区别？

】react-router4.0、react-router-dom和react-router-redux有啥区别？【英文标题】：Whatisdifferencebetweenreact-router4.0,react-router-domandreact-router-redux?react-router4.0、react-router-dom和react-router-redux有什么区别？【发布时间】：2017-08-2808:30 查看详情

react-router介绍及使用

参考技术AReact-Router4.0版本之前安装React-Router4.0版本之后安装在React-Router4.0开始，官方提供一个基础的路由react-router。目前使用的版本获取path的参数Route里面component和render这两个属性的使用：<Link/>里面的to属性是一个对象，... 查看详情

react-router4.0的初探

react-router升级4.0以后出现了 ‘react-router-dom‘引入时要import{BrowserRouter,Route}from ‘react-router-dom‘;<Providerstore={store}key="provider"><BrowserRouterhistory={history}onUpdate={()=> 查看详情

react-router4.0这个路由怎么配置

无线路由器就是带有无线覆盖功能的路由器，它主要应用于用户上网和无线覆盖。市场上流行的无线路由器一般都支持专线xdsl/cable，动态xdsl，pptp四种接入方式，它还具有其它一些网络管理的功能，如dhcp服务、nat防火墙、mac地... 查看详情

treemap详细介绍(源码解析)和使用示例

...整体认识，然后再学习它的源码，最后再通过实例来学会使用TreeMap转载请注明出处：http://www.cnblogs.com/skywang12345/admin/EditPosts.aspx?p 查看详情

java集合系列11之hashtable详细介绍(源码解析)和使用示例

...整体认识，然后再学习它的源码，最后再通过实例来学会使用Hashtable。第1部分Hashtable介绍第2部分Hashtable数据结构第3部分Hashtable源码解析(基于JDK1.6.0_45)第4部分Hashtable遍历方式第5部分Hashtable示例转载请注明出查看详情

java集合系列06之vector详细介绍(源码解析)和使用示例

...整体认识，然后再学习它的源码；最后再通过实例来学会使用它。第1部分Vector介绍第2部分Vector数据结构第3部分Vector源码解析(基于JDK1.6.0_45)第4部分Vector遍历方式第5部分Vector示例转载：http://www.cnblogs.com/sk 查看详情

java集合系列13之weakhashmap详细介绍(源码解析)和使用示例

...整体认识，然后再学习它的源码，最后再通过实例来学会使用WeakHashMap。第1部分WeakHashMap介绍第2部分WeakHashMap数据结构第3部分WeakHashMap源码解析(基于JDK1.6.0_45)第4部分WeakHashMap遍历方式第5部分WeakHashMap示例第1部分WeakHashM 查看详情

django类视图简单使用和源码解析

...的类视图，CBV：　　我们在开始接触django的时候，习惯于使用函数编写视图，即FBV。使用FBV时，我们只需要在路由匹配时，对应的路由下找到这个函数就可以了，这样做看似很和谐，但是有的时候，譬如说，当我们需要根据同一... 查看详情

java集合系列11之hashtable详细介绍(源码解析)和使用示例

...整体认识，然后再学习它的源码，最后再通过实例来学会使用Hashtable。第1部分Hashtable介绍第2部分Hashtable数据结构第3部分Hashtable源码解析(基于JDK1.6.0_45)第4部分Hashtable遍历方式第5部分Hashtable示例转载：http://ww 查看详情

java集合系列12之treemap详细介绍(源码解析)和使用示例

...整体认识，然后再学习它的源码，最后再通过实例来学会使用TreeMap。内容包括：第1部分TreeMap介绍第2部分TreeMap数据结构第3部分TreeMap源码解析(基于JDK1.6.0_45)第4部分TreeMap遍历方式第5部分TreeMap示例转载：http://www.cnblogs.com/skywang123... 查看详情

java集合系列：arraylist详细介绍(源码解析)和使用示例

...整体认识，再学习它的源码，最后再通过例子来学习如何使用它。第1部分ArrayList介绍ArrayList简介ArrayList是一个数组队列，相当于动态数组。与J 查看详情

jdk中funtion接口源码解析和使用详解(代码片段)

目录1.Funtion源码阅读2.Funtion函数汇总3.Funtion函数举例FunctionalInterface(功能接口)为lambda表达式和方法引用(用冒号::来进行方法的调用)提供目标类型。每个功能接口都有一个抽象方法，称为该功能接口的功能方法，lambda表达... 查看详情