React-Router入門

以前本身有在用React來重構以前寫過的本身工做室官網，其中有用到React中的核心思想：組件，props，state。還有用Rap的接口來實現先後端交互請求（就是請求團隊成員的信息部分）。本身以爲仍是實現起來比較簡單。

如今呢。學習React不只要學習官網的一些知識，還要學習一些有關它的技術棧。 今天本身搜索了阮一峯的有關React-Router的教程。本身跟着github上的14個小栗子進行了練習。

下面總結一些。 先粘貼一段代碼：

//route.js
module.exports = (
    <Route path="/" component={App}>
        <Route path="/repos" component={Repos}>
            <Route path="/repos/:username/:repoName" component={Repo} />
        </Route>
        <Route path="/about" component={About} />
    </Route>
);

//index.js
import React from 'react'
import { render } from 'react-dom'
import {Router,browserHistory} from 'react-router';
import routes from './modules/routes';

render(<Router history={browserHistory} routes={routes} />,document.getElementById('app'));

相信瀏覽一遍上面的代碼以後，就會發現主要有Router,Route這兩個組件。Router組件自己只是一個容器，真正的路由要經過Route組件定義，Route組件定義了URL路徑和組件之間的對應關係，你能夠同時使用多個Route組件。 舉個簡單的小栗子 用戶訪問/repos（好比http://localhost:8080/#/repos）時，加載Repos組件；訪問/about（http://localhost:8080/#/about）時，加載About組件。