探索React----第一章：ReactRouterV2基础

ReactRouter(V2)基础

1.路由

路由就是Router，这里的路由并不是我们在计算机网路中所学的路由的概念，而是前端的‘路由’，简单的来说就是通过URL的变化，使用路由来跳转到相对应的路径来显示不一样的页面，虽然只是这么一个小功能，但是它却是web应用中一个非常非常非常重要的一步。一个只会写页面的前端工程师不是工程师，顶多就是个工人，工程师的目标就是去架构，去优化，去理解，去运用。所以ReactRouter是必须要迈过的一个坎，为了方便写文章，ReactRouter的知识得再从头学一遍。

2.路由配置

不使用ReactRouter

import React from 'react'import { render } from 'react-dom'//这是创建React组件的ES5的写法,ES6的写法是export default class extends React.component{}//可以看到我们一共创建了4个页面组件，const About = React.createClass({/*...*/})const Inbox = React.createClass({/*...*/})const Home = React.createClass({/*...*/})//当前渲染的是App页面const App = React.createClass({  //初始化路由的状态为'#'后面的字符串  getInitialState() {    return {      route: window.location.hash.substr(1)    }  },  //在页面第一次渲染后随时监听URL上'#'后面的字符串来控制跳转  componentDidMount() {    window.addEventListener('hashchange', () => {      this.setState({        route: window.location.hash.substr(1)      })    })  },  //一旦state重新赋值后会触发当前页面重新渲染，这个时候APP页面的子组件会发生改变，改变的页面自然就是路由的值决定的  render() {    let Child    switch (this.state.route) {      case '/about': Child = About; break;      case '/inbox': Child = Inbox; break;      default:      Child = Home;    }    return (      <div>        <h1>App</h1>        <ul>          <li><a href="#/about">About</a></li>          <li><a href="#/inbox">Inbox</a></li>        </ul>        <Child/>      </div>    )  }})React.render(<App />, document.body)

根据上面的方法，如果在About页面中还有其他子页面，那么case的状况就会变多，并且这个嵌套的结构也会变得更加的复杂。我们再来看一下ReactRouter解决这种路径定向的方式：

使用ReactRouter

import React from 'react'import { render } from 'react-dom'// 首先我们需要导入一些组件...import { Router, Route, Link } from 'react-router'// 然后我们从应用中删除一堆代码和// 增加一些 <Link> 元素...const App = React.createClass({  render() {    return (      <div>        <h1>App</h1>        {/* 把 <a> 变成 <Link> */}        <ul>          <li><Link to="/about">About</Link></li>          <li><Link to="/inbox">Inbox</Link></li>        </ul>        //这里我们注意一下，this.props.children指的该组件的所有子节点        {/*          接着用 `this.props.children` 替换 `<Child>`          router 会帮我们找到这个 children        */}        {this.props.children}      </div>    )  }})// 最后，我们用一些 <Route> 来渲染 <Router>。// 这些就是路由提供的我们想要的东西。React.render((  <Router>    <Route path="/" component={App}>      <Route path="about" component={About} />      <Route path="inbox" component={Inbox} />    </Route>  </Router>), document.body)

这里面Router组件是个容器，里面的Route组件才是关键，Route组件包含path和component两个参数，path是路径，component是我们要渲染的页面，所有的Route组件组成了一个树形结构，Router会先加载外层的Route组件再加载内层的Router组件。所以当我们的路径是/about，最后渲染出的结构就是：

<App>  <about /></App>

这个时候，如果about页面如果还有子页面，我们就可以把子组件包裹在about页面中：

React.render((  <Router>    <Route path="/" component={App}>      <Route path="about" component={About}>          <Route path="messages/:id" component={Message} />      </ Route>      <Route path="inbox" component={Inbox} />    </Route>  </Router>), document.body)

现在访问 URL about/messages/Jkei3c32 将会匹配到一个新的路由，并且它成功指向了 App -> About -> Message 这个 UI 的分支。
仔细观察一下message组件，它后面还跟了一个/:id的字样，这就是我们这个页面接受某个id，就像我们访问CDN的个人博客，就需要带一个个人独有的id，没毛病，这就是URL中的参数。
为了从服务器获取 message 数据，我们首先需要知道它的信息。当渲染组件时，React Router 会自动向 Route 组件中注入一些有用的信息，尤其是路径中动态部分的参数。

const Message = React.createClass({  componentDidMount() {    // 来自于路径 `/about/messages/:id`    const id = this.props.params.id    fetchMessage(id, function (err, message) {      this.setState({ message: message })    })  },  // ...})

3.路由匹配

路由匹配原理

Router会根据URL路径按照深度优先遍历自上而下一层层找相应组件，如果没有那些乱七八糟的通配符，路由的匹配相当简单，顺着路径在对应的组件下面找符合路径的子组件，这个真的没啥好说的。

通配符

通配符匹配规则

(1) :paramName
:paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。
(2) ()
()表示URL的这个部分是可选的。
(3) *
*匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
(4) **
** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。

通配符匹配实例

<Route path="/hello/:name">// 匹配 /hello/michael// 匹配 /hello/ryan<Route path="/hello(/:name)">// 匹配 /hello// 匹配 /hello/michael// 匹配 /hello/ryan<Route path="/files/*.*">// 匹配 /files/hello.jpg// 匹配 /files/hello.html<Route path="/files/*">// 匹配 /files/ // 匹配 /files/a// 匹配 /files/a/b<Route path="/**/*.jpg">// 匹配 /files/hello.jpg// 匹配 /files/path/to/file.jpg

注意优先级

路由匹配规则是从上到下执行，一旦发现匹配，就不再其余的规则了。

//先匹配第一个，第二个就不会匹配了<Route path="/comments" ... /><Route path="/comments" ... />//同样，为了防止以下这种情况，我们一般把带参数的放在底部<Router>  <Route path="/:userName/:id" component={UserPage}/>  <Route path="/about/me" component={About}/></Router>

4.history

对于history这里的解释我一直很困惑：React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。
前面的实例命名没有写明history，不还是能根据url进行跳转吗？其实Router组件在不注明history参数时，默认是history={hashHistory},在reactRouter中共有3种history：

hashHistory

import { hashHistory } from 'react-router'render(  <Router history={hashHistory} routes={routes} />,  document.getElementById('app'))

当然你也可以不配置，hashHistory的作用就是监听URL中#后的值的变化，就像前面的例子，对应的URL应该是这种形式： ‘http://example.com/#/some/path‘。同时history会把历史网页push进内存，这样我们就可以实现回退，跳转等操作。

browserHistory

import { browserHistory } from 'react-router'render(  <Router history={browserHistory} routes={routes} />,  document.getElementById('app'))

如果设为browserHistory，浏览器的路由就不再通过Hash完成了，而显示正常的路径’example.com/some/path’，背后调用的是浏览器的History API。所以我们建议的history应该是browerHistory。

createMemoryHistory

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

const history = createMemoryHistory(location)

关于history，ReactRouterV4已经有了非常大的改动,这个我们会在V4版本学习笔记中在在探讨。

5.默认路由和IndexLink

看最上面的实例我们会发现我们似乎漏掉了一个Home页面，Home页面就是我们在URL中只有’/’加载的App下的默认组件，那么我们如何使Home显示呢？
{this.props.children || }这种写法实现的就是在this.props.children是undefined的情况下（即’/’）加载Home组件，但是因为Home和About，Inbox是同级组件，所以这种结构并不太好。

IndexRoute

IndexRoute就是解决这个问题，显式指定Home是根路由的子组件，即指定默认情况下加载的子组件。

<Router>  <Route path="/" component={App}>    <IndexRoute component={Home}/>    <Route path="accounts" component={Accounts}/>    <Route path="statements" component={Statements}/>  </Route></Router>

现在，用户访问/的时候，加载的组件结构如下:

<App>  <Home/></App>

Link和IndexLink

Link的作用类似于a标签，生成一个链接，用户点击跳转。

<ul>  <li><Link to="/about">About</Link></li>  <li><Link to="/inbox">Inbox</Link></li></ul>

样式：

<Link to="/about" activeStyle={{color: 'red'}}>About</Link><Link to="/repos" activeStyle={{color: 'red'}}>Repos</Link>

或者

<Link to="/about" activeClassName="active">About</Link><Link to="/repos" activeClassName="active">Repos</Link>

在Router组件之外，导航到路由页面，可以使用浏览器的History API，像下面这样写。

import { browserHistory } from 'react-router';browserHistory.push('/some/path');

IndexLink是我们在链接到根路由/时使用的组件，为什么要使用IndexLink，因为对于根路由，我们设置样式是就会总匹配，所以我们就需要一个只匹配根路由样式的组件。

<IndexLink to="/" activeClassName="active">  Home</IndexLink>

6.小结

本来是想一口气把ReactRouterV2的知识都学完的，包括之后的ReactRouter高级用法，但是我看了一下高级用法，虽然每小节内容不多，但是却需要花些功夫去理解实践，因此，本篇的内容写到这里，再写也显得冗长。想看更多的直接去看ReactRouter中文文档。
另外，ReactRouterV4早就更新了，里面有非常多的改动，因此，写完ReactRouterV2之后，我们会再去研究ReactRouterV4的内容。