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组件。