无论如何，根目录是我们应用的和新路径，在任何子目录都会被渲染。好吧技术上比这个更复杂一些，不过你来考虑一下维特根斯坦的梯子。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}/>作为根目录.
