React 實踐記錄 03 React router

Introduction

本文主要參考了react router 的官方文檔。

React Router是一套完整的配合React的路由解決方案，可能你已經知道前端路由，或者知道後端有路由的概念，以下圖：

React Router能夠幫助咱們將URL與組件狀態同步，實現路由。

Router Overview

咱們先來看看，不使用React Router的話，動態圖中的功能要如何實現:

var React = require('react');

var About = React.createClass({
  render: function () {
    return(
      <div>
        <h2>About</h2>
        <p>這裏將會出現N多介紹文字balabala</p>
      </div>
  );}
});

var blogs = React.createClass({
  render: function () {
    return(
      <div>
        <h2>blogs</h2>
        <a href="＃">文章A</a>
        <br />
        <a href="＃">文章B</a>
        <br />
        <a href="＃">文章C</a>
        <br />
        <a href="＃">文章D</a>
      </div>
  );}
});

var Home = React.createClass({
  render: function () {
    return(
      <div>
        <h2>Home</h2>
        <p>這裏是首頁</p>
      </div>
  );}
});

var App = React.createClass({
  render () {
    var Child;
    switch (this.props.route) {
      case 'about': Child = About; break;
      case 'blogs': Child = blogs; break;
      default:      Child = Home;
    }

    return (
      <div>
        <h1>App</h1>
        <Child/>
      </div>
    )
  }
});

function render () {
  var route = window.location.hash.substr(1);
  React.render(<App route={route} />, document.body);
}
window.addEventListener('hashchange', render);
render();

關於react語法細節，請參考博主以前關於react的文章。

每當URL中hash部分改變時，APP組件會渲染一個不一樣的Child組件。很是簡單明瞭。
可是，一旦咱們須要再嵌套一些路由，好比 blogs/react,about/communicate,那麼 window.location.hash.substr(1); 這樣的邏輯就會變的更爲複雜，若是再多嵌套一點呢？

With React Router

多層嵌套的URL以及多層嵌套的組件結構之間的映射是React router的核心，React Router在路由上使用JSX來聲明式編程。

var Router = require('react-router');
var Route = Router.Route;

// declare our routes and their hierarchy
var routes = (
  <Route handler={App}>
    <Route path="about" handler={About}/>
    <Route path="blogs" handler={blogs}/>
  </Route>
);

咱們如今能夠去掉以前switch部分的代碼,替換成RouteHandler

var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render () {
    return (
      <div>
        <h1>App</h1>
        <RouteHandler/>
      </div>
    )
  }
});

最後，咱們偵聽url的變化，並渲染組件。如下代碼將routes渲染到RouteHandler。

Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.body);
});

這裏寫 => 這種ES6會不會引發兼容性問題？大可放心，webpack會幫忙生成瀏覽器兼容的代碼。

全部的Route組件自己都是不會渲染的，它們只是用於配置。

引入嵌套

咱們來看看如何解決以前說的嵌套問題。
再建立一個組件：

var ReactContent = React.createClass({
  render: function () {
    return(
      <div>
        <p>這是一篇React 博文</p>
      </div>
  );}
});

咱們能夠這樣寫嵌套路由：

var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Home}/>

    <Route path="about" handler={About}/>
    <Route path="blogs" handler={Blogs}>
      <Route path="react" handler={ReactContent}/>
    </Route>
  </Route>
);

也能夠這樣寫：

var routes = (
  <Route path="/" handler={App}>
    <DefaultRoute handler={Home}/>

    <Route path="about" handler={About}/>
    <Route path="blogs" handler={Blogs}/>
    <Route path="blogs/react" handler={ReactContent}/>
  </Route>
);

這樣固然也是能夠的

<Route path="blogs/:id" handler={ReactContent}/>

Getting the url parameters

剛纔提到了:id，若是咱們想得到它，怎麼作呢？

//沒錯，直接能夠從handler組件的props中拿到。
var id = this.props.params.id;

DefaultRoute

咱們能夠給路由提供默認渲染，好比給跟路由加一個，由它完成用戶訪問index.html(或者你的主頁是其它什麼。。。)時的渲染任務。

<Route path="/" handler={App}>
  <DefaultRoute handler={Home}/>
</Route>

NotFoundRoute

URL：xxx#a/b。 假設，a是有路由的，若a/b沒有，那麼，咱們稱之爲沒法找到路由。請注意區分沒法找到路由何沒法找到資源的區別。

var NotFound = React.createClass({
  render: function () {
    return(
      <h1>對不起，咱們找不到路由哦</h1>
  );}
});

<Route path="/" handler={App}>
  <DefaultRoute handler={Home}/>

  <Route path="about" handler={About}/>
  <Route path="blogs" handler={Blogs}/>
  <Route path="blogs/react" handler={ReactContent}/>
  <NotFoundRoute handler={NotFound} />
</Route>

本文完。