简单易懂的React魔法(25):添加根目录

无论如何，根目录是我们应用的和新路径，在任何子目录都会被渲染。好吧技术上比这个更复杂一些，不过你来考虑一下维特根斯坦的梯子。https://en.wikipedia.org/wiki/Lie-to-children#Origin

我们将创建一个跟路由，把子页面包裹起来。ReactRouter 会先渲染跟路由，然后再渲染子节点。

从这里开始：在src/pages目录中创建文件App.js 我们将使用它来显示基本的App图标，然后在子页面显示内容，App.js内容如下：
src/pages/App.js

import React from 'react';
import Detail from './Detail';
import List from './List';
import { Router, Route, IndexRoute } from 'react-router';
class App extends React.Component {
    componentDidMount(){

    }
    render() {
        return (
            <div>
                <h1>Unofficial GitHub Browser v0.1</h1>
                <Route exact path="/" component={List}/>
                <Route path="/detail/:repo" component={ Detail } />
            </div>
        );
    }
}

export default App;

这段代码唯一有意思的部分是

<Route exact path="/" component={List}/>
<Route path="/detail/:repo" component={ Detail } />

由于react-router 4版本吸取了react的设计理念，router也可以当作组件放在组件中了，理念上和2.x版本发生了很多变化，译者在翻译到这章的时候也进行了重新学习，水平有限如果有更好的写法请告诉我，一起学习一起进步，现在我们将

import Detail from './Detail';
import List from './List';

Detail和List组件加载到App中，我们来修改index.js
代码如下：
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory'
import App from './pages/App';
const history = createBrowserHistory()

ReactDOM.render(
    <Router history={history} onUpdate={() => window.scrollTo(0, 0)}>
        <div>
            <Route component={App}/>
        </div>
    </Router>,
    document.getElementById('app')
);

index中只引入了App这个组件，具体react router2.x和4.x的版本差异也是个大坑，详情请移步
react-router 4.x文档.

<Route component={App}/>作为根目录.