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>

本文完。