简单易懂的React魔法(22):如何在React Router

所有的这些工作做完，看起来就和没做一样，得到的结果是一样的。没关系，因为这是这个项目的重要基础。现在我们要为主页添加一个新的页面，然后把现在的主页放在‘/react’里。

所以，在src/pages目录下创建List.js，内容如下：

src/pages/List.js

import React from 'react';

class List extends React.Component {
    render() {
        return <p>This is the list page.</p>;
    }
}

export default List;

添加这个文件，之后会显示在主页上，然后在‘/react’加载我们的Detail组件。为了实现它我们需要添加新的路由，然后移动现在的这个。

作为提示，下面是你现在的index.js文件：
src/index.js

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

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

在index文件下导入刚完成的List组件。如果你不知道怎么做，他应该是这样的：

src/index.js

import List from './pages/List';

现在我们移动已有的路由，把他放在“/react”路径下，就像这样：

src/index.js

<Route exact path="/" component={List} />
<Route path="/react" component={Detail} />

就这样了，你可以打开浏览器进入http://localhost:8080 看到一行“This is the list page”
http://localhost:8080/react 看到我们之前做的页面。

很简单的，不是么？但是这两个页面都不是很有用，我们需要让用户选择一个GitHub项目去看它的细节，所以接下来要修改我们的List组件。