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

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>
)

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>
 )
}

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 "htmlcode">

let keys = [],keys2=[]
let re = pathToRegexp('/foo/:bar', keys)
//re = /^\/foo\/([^\/]+"external nofollow" target="_blank" href="https://github.com/pillarjs/path-to-regexp">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 === '' "htmlcode">

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应用.


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

            
            上一篇：详解Angular 4.x NgTemplateOutlet

            下一篇：angularjs中ng-bind-html的用法总结