为什么要使用 React Router

大部分开发者使用vue进行项目开发时都会用到vue-router，其实在react框架中编程也会用到react-router，react的路由库，其功能还是非常强大的，给我们带来了很多方便，让开发更容易。本文主要介绍使用react-router和不使用react-router的区别。

不使用react-router

import React from 'react'
import { render } from 'react-dom'

const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})

const App = React.createClass({
  getInitialState() {
    return {
      route: window.location.hash.substr(1)
    }
  },

  componentDidMount() {
    window.addEventListener('hashchange', () => {
      this.setState({
        route: window.location.hash.substr(1)
      })
    })
  },

  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)

当 URL 的 hash 部分（指的是 # 后的部分）变化后，<App> 会根据 this.state.route 来渲染不同的 <Child>。看起来很直接，但它很快就会变得复杂起来。现在设想一下 Inbox 下面嵌套一些分别对应于不同 URL 的 UI 组件，就像下面这样的列表-详情视图：

还可能有一个状态页，用于在没有选择 message 时展示：

为了让我们的 URL 解析变得更智能，我们需要编写很多代码来实现指定 URL 应该渲染哪一个嵌套的 UI 组件分支：App -> About, App -> Inbox -> Messages -> Message, App -> Inbox -> Messages -> Stats，等等。上面的这种搞法各位大佬是不是感觉很难受，如果是这样，应该有不少人会弃用react吧。下面我们看看使用react-router之后的写法。

使用 React Router 后

让我们用 React Router 重构这个应用。

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` 替换 `<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)

React Router 知道如何为我们搭建嵌套的 UI，因此我们不用手动找出需要渲染哪些 <Child> 组件。举个例子，对于一个完整的 /about 路径，React Router 会搭建出 <App><About /></App>。

在内部，router 会将你树级嵌套格式的 <Route> 转变成路由配置。但如果你不熟悉 JSX，你也可以用普通对象来替代：

const routes = {
  path: '/',
  component: App,
  childRoutes: [
    { path: 'about', component: About },
    { path: 'inbox', component: Inbox },
  ]}React.render(<Router routes={routes} />, document.body)

看看改造后的写法，是不是瞬间感到很清爽，学起来很有动力。下面我们往里面添加几个UI视图之后你就会发现react-router用起来是真的爽。

添加UI组件

// 新建一个组件让其在 Inbox 内部渲染const Message = React.createClass({
  render() {
    return <h3>Message</h3>
  }})const Inbox = React.createClass({
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {/* 渲染这个 child 路由组件 */}
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }})React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        {/* 添加一个路由，嵌套进我们想要嵌套的 UI 里 */}
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>), document.body)

我们访问一下我们刚刚添加的UI组件：

现在访问 URL inbox/messages/Jkei3c32 将会匹配到一个新的路由，并且它成功指向了 App -> Inbox -> Message 这个 UI 的分支。

<App>
  <Inbox>
    <Message params={ {id: 'Jkei3c32'} } />
  </Inbox>
</App>

接下来我们获取一下URL参数

为了从服务器获取 message 数据，我们首先需要知道它的信息。当渲染组件时，React Router 会自动向 Route 组件中注入一些有用的信息，尤其是路径中动态部分的参数。我们的例子中，它指的是 :id。

const Message = React.createClass({

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

  // ...})

上面对react-router的使用做了一个基本的介绍，后期小编还会更加深入的介绍react-router，希望能够帮助到大家。