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

import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

const Basic = () => (
 
 

  

  
Home
  
Page1
  
Page2
  

  


  
  
  
 
 
)

const Page2 = ({ match }) => (
 

 
Page2
 

  

  
   branch1
  
  
  

  
   branch2
  
  
  

  
   branch3
  
  
 

 
  (
  
Default Information
 )} />
 
)

const Branch = ({ match }) => {
 console.log(match);
 return (
 

  
{match.params.branchId}
 
 )
}

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 &＃63; (
  match &＃63; React.createElement(component, props) : null
  ) : render &＃63; ( // render prop is next, only called if there's a match
  match &＃63; render(props) : null
  ) : children &＃63; ( // children come last, always called
  typeof children === 'function' &＃63; (
   children(props)
  ) : !Array.isArray(children) || children.length &＃63; ( // Preact defaults to empty children array
   React.Children.only(children)
  ) : (
    null
   )
  ) : (
    null
   )
 )
 }
}

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

let re2 = pathToRegexp('/foo/bar', keys2)
//re2 = /^\/foo\/bar(&＃63;:\/(&＃63;=$))&＃63;$/i keys2 = []

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 === '' &＃63; '/' : url, 
 isExact, 
 params: keys.reduce((memo, key, index) => {
 memo[key.name] = values[index]
 return memo
 }, {})
}

static propTypes = {
 onClick: PropTypes.func,
 target: PropTypes.string,
 replace: PropTypes.bool,
 to: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.object
 ]).isRequired
}

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

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