React-Router-v4

react-router-v4

一、简介

一切皆组件

react-router在这个版本被拆分成了三个包

• react-router （核心库）
• react-router-dom （浏览器环境）
• react-router-native （react-native环境）

---

二、基本概念

1. 安装

基于web浏览器开发，所以只需要引入react-router-dom

npm install -S react-router-dom

or

yarn add react-router-dom

2. 官方示例

• 引入并拟写基本结构

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

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/topics">主题列表</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)

注:
BrowserRouter(路由器)
Route(路由)
    exact：唯一匹配，仅匹配"/",否则会同时匹配"/"和"/xxx"
    path：路径
    component：路径匹配后所要渲染的组件
Link(链接 想象成<a>标签) 

• Home及About组件实现

const Home = () => (
  <div>
    <h2>首页</h2>
  </div>
)

const About = () => (
  <div>
    <h2>关于</h2>
  </div>
)

• Topics及Topic组件实现

const Topics = ({ match }) => (
  <div>
    <h2>主题列表</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          使用 React 渲染
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          组件
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          属性 v. 状态
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>请选择一个主题。</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

注:
match(匹配Route加载的组件所获取的一个对象参数)
    isExact: 是否是全等匹配
    params: path正则解析后的值对象
    path: 路由的地址
    url: 与当前location路径名所匹配部分

---

三、基本概念

• Router（路由器）

  • BrowserRouter （由服务器来管理动态请求时使用，h5的history）
  • HashRouter （静态网站，老版本浏览器的history）
  • MemoryRouter （主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动）

• <Route>（路由）

  • exact: propType.bool （是否是唯一匹配）

  • path: propType.string （路径，如果没有赋值，则默认渲染指定的component）

  • component: propType.func （常用）

  一个React组件。当带有component参数的route匹配成功后，route会返回一个新的元素，其为component参数所对应的React组件（使用React.createElement创建）。

   例:
  Route path='/page' component={Page} />
  

  • render: propType.func （常用）

  当地址匹配成功后调用该函数。该过程与传入component参数类似，并且对于行级渲染与需要向元素传入额外参数的操作会更有用。最后返回一个React element。

   例:
  const extraProps = { color: 'red' }
  <Route path='/page' render={(props) => (
      <Page {...props} data={extraProps}/>
  )}/>
  

  • children：propType.func （不常用，一般用在path无法匹配时呈现的'空'状态）

  一个返回React element的函数。与上述两个参数不同，无论route是否匹配当前location，其都会被渲染。

  <Route path='/page' children={(props) => (
      props.match
          ? <Page {...props}/>
          : <EmptyPage {...props}/>
  )}/>
  

  • 其他属性看官方文档

• match（匹配Route加载的组件所获取的一个对象参数）

  • isExact: 是否是全等匹配
  • params: 由pathToRegexp解析path后所组成的一个对象

  //通过pathToRegexp解析path
  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
        }, {})
  }
  

  pathToRegexp解析path:
  var keys = []
  var re = pathToRegexp('/foo/:bar', keys)
  // re = /^\/foo\/([^\/]+?)\/?$/i
  // keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]
  
  

  • path: 路由的地址
  • url: 与当前location路径名所匹配部分

• <Link>

  *URL会更新，组件会被重新渲染，但是页面不会重新加载

  • to:

  propType.string

  需要跳转到的路径(pathname)或地址（location）

  <Link to="/about">关于</Link>
  <Link to="/courses"/>
  

  propType.obj

  <Link to={{
      pathname: '/courses',
      search: '?sort=name',
      hash: '#the-hash',
      state: { fromDashboard: true }
  }}/>
  

  • replace: PropTypes.bool

  为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。
  为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。
  默认为 false。
  
  <Link to="/courses" replace />
  

• <Switch>

  将仅渲染第一个匹配的路由

  import { Switch, Route } from 'react-router'
  
  <Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/:user" component={User}/>
    <Route component={NoMatch}/>
  </Switch>
  

  否则会渲染所有匹配的路由

（End~）