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>

本文完。