React Router 详解

React Router 是完整的 React 路由解决方案，它保持 UI 与 URL 同步，拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理

GitHub 访问地址 :  https://github.com/ReactTraining/react-router

安装

$ npm install --save react-router

路由配置 : 路由配置是一组指令，用来告诉 router 如何匹配 URL以及匹配后如何执行代码

Router组件本身只是一个容器，真正的路由要通过Route组件定义

import React from 'react'

import { Router, Route, Link } from 'react-router'

const App = React.createClass({

  render() {

    return (

      <div>

        <h1>App</h1>

        <ul>

          <li><Link to="/about">About</Link></li>

          <li><Link to="/inbox">Inbox</Link></li>

        </ul>

        {this.props.children}

      </div>

    )

  }

})

const About = React.createClass({

  render() {

    return <h3>About</h3>

  }

})

const Inbox = React.createClass({

  render() {

    return (

      <div>

        <h2>Inbox</h2>

        {this.props.children || "Welcome to your Inbox"}

      </div>

    )

  }

})

const Message = React.createClass({

  render() {

    return <h3>Message {this.props.params.id}</h3>

  }

})

React.render((

  <Router>

    <Route path="/" component={App}>

      <Route path="about" component={About} />

      <Route path="inbox" component={Inbox}>

        <Route path="messages/:id" component={Message} />

      </Route>

    </Route>

  </Router>

), document.body

通过上面的配置，这个应用知道如何渲染下面四个 URL :

URL	组件
/	App
/about	App -> About
/inbox	App -> Inbox
/inbox/messages/:id	App -> Inbox -> Message

添加首页 : 当 URL 为 / 时，App 的 render 中的 this.props.children 还是 undefined 此时使用 IndexRoute 来设置一个默认页面

import { IndexRoute } from 'react-router'

const Dashboard = React.createClass({

  render() {

    return <div>Welcome to the app!</div>

  }

})

React.render((

  <Router>

    <Route path="/" component={App}>

      {/* 当 url 为/时渲染 Dashboard */}

      <IndexRoute component={Dashboard} />

      <Route path="about" component={About} />

      <Route path="inbox" component={Inbox}>

        <Route path="messages/:id" component={Message} />

      </Route>

    </Route>

  </Router>

), document.body)

此时 App 的 render 中的 this.props.children 将会是 <Dashboard>这个元素，此时的  sitemap 现在看起来如下 :

URL	组件
/	App -> Dashboard
/about	App -> About
/inbox	App -> Inbox
/inbox/messages/:id	App -> Inbox -> Message

绝对路径 : 使用 绝对路径 可以去除前置路径，如可以将 /inbox 从 /inbox/messages/:id 中去除

React.render((

  <Router>

    <Route path="/" component={App}>

      <IndexRoute component={Dashboard} />

      <Route path="about" component={About} />

      <Route path="inbox" component={Inbox}>

         {/* 使用 /messages/:id 替换 messages/:id */}

         <Route path="/messages/:id" component={Message} />

      </Route>

    </Route>

  </Router>

), document.body)

此时的  sitemap 现在看起来如下 :

URL	组件
/	App -> Dashboard
/about	App -> About
/inbox	App -> Inbox
/messages/:id	App -> Inbox -> Message

注 : 1> 绝对路径 可能在动态路由中无法使用

       2> 此时  /inbox/messages/ 无法访问

页面跳转 : 使用 <Redirect> 可以让访问地址跳转到另外一个页面中，可用于兼容旧的 URL

import { Redirect } from 'react-router'

React.render((

  <Router>

    <Route path="/" component={App}>

      <IndexRoute component={Dashboard} />

      <Route path="about" component={About} />

      <Route path="inbox" component={Inbox}>

        <Route path="/messages/:id" component={Message} />

         {/* 跳转 /inbox/messages/:id 到 /messages/:id */}

         <Redirect from="messages/:id" to="/messages/:id" />

      </Route>

    </Route>

  </Router>

), document.body)

这样当访问 /inbox/messages/5 就会跳转到 /messages/5

进入和离开 hook : Route 可以定义 onEnter 和 onLeave 两个 hook ，这些 hook 会在页面跳转确认时触发一次。这些 hook 对于一些情况非常的有用，例如权限验证或者在路由跳转前将一些数据持久化保存起来。在路由跳转过程中，onLeave hook 会在所有将离开的路由中触发，从最下层的子路由开始直到最外层父路由结束，然后 onEnter hook 会从最外层的父路由开始直到最下层子路由结束

路由匹配原理

路由拥有三个属性来决定是否 "匹配" 一个 URL

嵌套关系 : React Router 使用路由嵌套的概念来让你定义 view 的嵌套集合，当一个给定的 URL 被调用时，整个集合中 (命中的部分) 都会被渲染。嵌套路由被描述成一种树形结构。React Router 会深度优先遍历整个路由配置来寻找一个与给定的 URL 相匹配的路由，一旦发现匹配就不再匹配其余的规则

路径语法 : 路由路径是匹配一个 (或一部分) URL 的一个字符串模式。大部分的路由路径都可以直接按照字面量理解，除了以下几个特殊的符号

:paramName : 匹配一段位于 /、? 或 # 之后的 URL，命中的部分将被作为一个参数

() : 在它内部的内容被认为是可选的

* : 匹配任意字符 (非贪婪的) 直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数

<Route path="/hello/:name">    // 匹配 /hello/michael 和 /hello/ryan

<Route path="/hello(/:name)">  // 匹配 /hello, /hello/michael 和 /hello/ryan

<Route path="/files/*.*">      // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

如果一个路由使用了相对路径，那么完整的路径将由它的所有祖先节点的路径和自身指定的相对路径拼接而成，使用绝对路径可以使路由匹配行为忽略嵌套关系

优先级 : 路由算法会根据定义的顺序自顶向下匹配路由。因此，当你拥有两个兄弟路由节点配置时，你必须确认前一个路由不会匹配后一个路由中的路径

Histories

React Router 是建立在 history 之上的。简而言之，一个 history 知道如何去监听浏览器地址栏的变化，并解析这个 URL 转化为 location 对象，然后 router 使用它匹配到路由，最后正确地渲染对应的组件，其有三种形式 : browserHistory、hashHistory、createMemoryHistory

browserHistory : Browser history 是使用 React Router 的应用推荐的 history，它使用浏览器中的 History API 用于处理 URL，创建一个像 example.com/some/path这样真实的 URL

hashHistory : Hash history 使用 URL 中的 hash(#) 部分去创建形如 example.com/#/some/path 的路由

createMemoryHistory : Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的，同时它也非常适合测试和其他的渲染环境 (像 React Native)

动态路由

对于大型应用来说，一个首当其冲的问题就是所需加载的 JavaScript 的大小。程序应当只加载当前渲染页所需的 JavaScript。有些开发者将这种方式称之为"代码分拆" 将所有的代码分拆成多个小包，在用户浏览过程中按需加载

对于底层细节的修改不应该需要它上面每一层级都进行修改。举个例子，为一个照片浏览页添加一个路径不应该影响到首页加载的 JavaScript 的大小。也不能因为多个团队共用一个大型的路由配置文件而造成合并时的冲突。路由是个非常适于做代码分拆的地方 : 它的责任就是配置好每个 view

React Router 里的路径匹配以及组件加载都是异步完成的，不仅允许延迟加载组件，并且可以延迟加载路由配置。在首次加载包中只需要有一个路径定义，路由会自动解析剩下的路径

Route 可以定义 getChildRoutes，getIndexRoute 和 getComponents 这几个函数。它们都是异步执行，并且只有在需要时才被调用，将这种方式称之为 “逐渐匹配”。 React Router 会逐渐的匹配 URL 并只加载该 URL 对应页面所需的路径配置和组件

跳转前确认

React Router 提供一个 routerWillLeave 生命周期钩子，这使得 React 组件可以拦截正在发生的跳转，或在离开 route 前提示用户，routerWillLeave 返回值有以下两种 :

1> return false 取消此次跳转

2> return 返回提示信息，在离开 route 前提示用户进行确认

import { Lifecycle } from 'react-router'

const Home = React.createClass({

  // 假设 Home 是一个 route 组件，它可能会使用

  // Lifecycle mixin 去获得一个 routerWillLeave 方法。

  mixins: [ Lifecycle ],

  routerWillLeave(nextLocation) {

    if (!this.state.isSaved)

      return 'Your work is not saved! Are you sure you want to leave?'

  },

  // ...

})

服务端渲染

服务端渲染与客户端渲染有些许不同，因为需要 :

1> 发生错误时发送一个 500 的响应

2> 需要重定向时发送一个 30x 的响应

3> 在渲染之前获得数据 (用 router 帮你完成这点)

为了迎合这一需求，要在 <Router> API 下一层使用 :

1> 使用 match 在渲染之前根据 location 匹配 route

2> 使用 RoutingContext 同步渲染 route 组件

它看起来像一个虚拟的 JavaScript 服务器 :

import { renderToString } from 'react-dom/server'

import { match, RoutingContext } from 'react-router'

import routes from './routes'

serve((req, res) => {

  // 注意！这里的 req.url 应该是从初始请求中获得的

  // 完整的 URL 路径，包括查询字符串。

  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {

    if (error) {

      res.send(500, error.message)

    } else if (redirectLocation) {

      res.redirect(302, redirectLocation.pathname + redirectLocation.search)

    } else if (renderProps) {

      res.send(200, renderToString(<RoutingContext {...renderProps} />))

    } else {

      res.send(404, 'Not found')

    }

  })

})

组件生命周期

路由组件的生命周期和 React 组件相比并没有什么不同

创建如下路由配置 :

<Route path="/" component={App}>

  <IndexRoute component={Home}/>

  <Route path="invoices/:invoiceId" component={Invoice}/>

  <Route path="accounts/:accountId" component={Account}/>

</Route>

获取数据

let Invoice = React.createClass({

  getInitialState () {

    return {

      invoice: null

    }

  },

  componentDidMount () {

    // 上面的步骤2，在此初始化数据

    this.fetchInvoice()

  },

  componentDidUpdate (prevProps) {

    // 上面步骤3，通过参数更新数据

    let oldId = prevProps.params.invoiceId

    let newId = this.props.params.invoiceId

    if (newId !== oldId)

      this.fetchInvoice()

  },

  componentWillUnmount () {

    // 上面步骤四，在组件移除前忽略正在进行中的请求

    this.ignoreLastFetch = true

  },

  fetchInvoice () {

    let url = `/api/invoices/${this.props.params.invoiceId}`

    this.request = fetch(url, (err, data) => {

      if (!this.ignoreLastFetch)

        this.setState({ invoice: data.invoice })

    })

  },

  render () {

    return <InvoiceView invoice={this.state.invoice}/>

  }

})

在组件外部使用导航 : 虽然在组件内部可以使用 this.context.router 来实现导航，但许多应用想要在组件外部使用导航。使用 Router组件上被赋予的 history可以在组件外部实现导航

// your main file that renders a Router

import { Router, browserHistory } from 'react-router'

import routes from './app/routes'

render(<Router history={browserHistory} routes={routes}/>, el)

// somewhere like a redux/flux action file:

import { browserHistory } from 'react-router'

browserHistory.push('/some/path')

react-router库中的相关组件

1> Router : 路由器组件, 用来包含各个路由组件

属性 : history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配

2> Route : 路由组件, 注册路由

path="/xxx"    ## 根路由组件  path="/"的组件, 一般为App

component={Xxx}

3> IndexRoute : 默认路由组件，当父路由被请求时, 默认就会请求此路由组件

4> hashHistory : 用于 Router组件的 history属性，路由的切换由URL的hash变化决定，即URL的#部分发生变化

为地址url生成 ?_k=hash, 用于内部保存对应的 state

5> Link : 路由链接组件

允许用户浏览应用的主要方式，<Link> 以适当的 href 去渲染一个可访问的锚标签，其包含多个属性

to : 指定跳转地址

query : 已经转化成字符串的键值对的对象

activeStyle : 当某个 route 是激活状态时，可以将样式添加到链接元素上

<Link to="/users" style={{color: 'white'}} activeStyle={{color: 'red'}}>Users</Link>

优化 Link 组件 : activeClassName="active" 为组件激活时的属性

import React from 'react';

import {Link} from 'react-router';

export default function NavLink(props) {

  return <Link {...props} activeClassName="active"/>

}

调用地方

<NavLink to={to}>{repo.repoName}</NavLink>

在 JavaScript 进行页面跳转

import {hashHistory} from 'react-router';

hashHistory.push('/detail/' + value); // 和 <Link> 功能类似，用于页面跳转

跳转后的页面获取数据，使用 this.props.params.paramName 来获取相应参数

// 在路由标签中

<Router history={} >

  <Route path=' / ' component={App} >

    <IndexRoute component={Home} />

    <Route path='detail/:id/:type' component={ Detail } />

    <Route path="*" component={NotFound} /> <!-- 404页面 -->

  </ Route >

</Router>

// 在跳转的目标页中

import { Component } from 'react';

class Detail extends Component {

  render() {

    return (

      <p> Detail,url参数: id= {this.pros. params.id } type= {this.pros. params.type }   </p>

    );

  }

}