简单易懂的React魔法(21):React Router简介

目前为止，我们所做的所有工作都在index.js或Detail.js中，但现在我们将添加第三个文件List.js，它将作为主页。从那里，用户将能够选择一个GitHub仓库，然后像以前一样显示Detail.js。

所以我们从一个页面显示所有commits，forks，pull变成先访问主页，用户可以选择React，ReactNative，Jest或其他的facebook项目。这涉及到很大的变化，所以我把这点分为两部分：先实现React Router保证页面能用，再添加新的主页。

简单说一下，React Router是根据用户要求的URL加载不同页面的组件。比如http://localhost:8080/hello会是一个页面，http://localhost:8080/world 加载不同的页面。

你现在的index.js 文件应该是这样的:

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Detail from './pages/Detail';

ReactDOM.render(
    ,
    document.getElementById('app')
);

除了最初的import，还需要多添加两行：

src/index.js

import { Router, Route, IndexRoute} from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory'

第一个import加载三个组件，我们现在要用到其中的两个，另一个先引入再说。Router是React Router本身，它需要URL和React组件，并将它们放在一起。Router是一个单独的URL映射，例如URL detail和我们的Detail组件。 IndexRoute用作默认路由，我们很快就会用到。

第二个import提高了巨大的复杂度，你可能不想知道。简单来说，ReactRouter需要一个好的办法来处理浏览器历史纪。它通过#（被称为hash history 因为 #被不懂音乐的人称为hash）链接不同组件。这个#不是必须的而且看起来有点难看，所以我们要去掉这个。所以我们要引入createHistory。

有了这些新的import，现在把注意力放在index的render方法。现在我们只是渲染了一个Detail组件，现在我们用了React Router 所以这样写：

src/index.js

const history = createBrowserHistory()
ReactDOM.render(
    
        

            
        
    ,
    document.getElementById('app')
);

你看，我们不是直接渲染Detail组件，而是渲染Router，而Router匹配到URL后会加载适当的组件。现在我们只制定一个URL，然后渲染Detail组件。

保存然后刷新浏览器，界面并没有什么变化。

同时我们需要添加一点比较高端的写法，但是这是必须的，直到ReactRouter解决这个问题。你看，当你从url1到url2的时候，实际没有发生跳转，ReactRouter只是卸载以前的组件加载别的组件，这会导致滚动问题，因为如果用户在更改url时如果已经滚动了一半的页面，那么新页面也会一开始就在一半的位置。

所以，高端的在这里：每当React Router 更新路由时，我们告诉浏览器回到文档顶部，就像传统页面刷新一样。

我们同时进行两个修改。替换Router的那几行：

src/index.js

const history = createBrowserHistory()

ReactDOM.render(
     window.scrollTo(0, 0)}>
        

            
        
    ,
    document.getElementById('app')
);

OnUpdate部分是在跳转时重置滚动位置。