React-Router路由配置

React路由使用react-router-dom实现，它提供了BrowserRouter、Route、Link等api，可以通过dom事件控制路由。

添加react-router-dom库

yarn add react-router-dom

新建两个组件aaa.js和bbb.js

import React, { Component } from 'react';

class AAA extends Component {
    render() {
        return (
            <div>
                <h1>AAA</h1>
            </div>
        )
    }
}
export default AAA;

import React, { Component } from 'react';

class BBB extends Component {
    render() {
        return (
            <div>
                <h1>BBB</h1>
            </div>
        )
    }
}
export default BBB;

将刚刚的两个组件，和react-router-dom中的一些api导入首页app.js。这里用了BrowserRouter，当然也可以用HashRouter，差别就是地址栏有没有#。比如用HashRouter地址栏就是：http://localhost:3000/#/

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import AAA from './aaa';
import BBB from './bbb';

然后在Dom里用Link来改变地址栏的url，注意Link，Route这些api都需要写在<BrowserRouter>里

<BrowserRouter>
    <div className="App">
        <Button type="primary"><Link to='/aaa'>导航A</Link></Button>
        <Button><Link to='/bbb'>导航B</Link></Button>
    </div>
</BrowserRouter>

此时点击按钮可以看到地址栏是改变的，会变成http://localhost:3000/aaa和http://localhost:3000/bbb。

然后，在下方加上要通过路由切换的组件，当path为aaa或者bbb的时候分别加载AAA和BBB。

<BrowserRouter>
    <div className="App">
        <Button type="primary"><Link to='/aaa'>导航A</Link></Button>
        <Button><Link to='/bbb'>导航B</Link></Button>
        <Switch>
            <Route path="/aaa" exact component={AAA} />
            <Route path="/bbb" exact component={BBB} />
        </Switch>
    </div>
</BrowserRouter>

此时，在浏览器中点击两个按钮，就能看到下方可以切换两种组件。

完整代码：

import React from 'react';
import { Button, Row } from 'antd';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import AAA from './aaa';
import BBB from './bbb';

class RouterTest extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <BrowserRouter>
                <div className="App">
                    <Row type="flex" justify="center">
                        <Button type="primary"><Link to='/aaa'>导航A</Link></Button>
                        <Button><Link to='/bbb'>导航B</Link></Button>
                    </Row>
                    <Row type="flex" justify="center">
                        <Switch>
                            <Route path="/aaa" exact component={AAA} />
                            <Route path="/bbb" exact component={BBB} />
                        </Switch>
                    </Row>
                </div>
            </BrowserRouter>
        );
    }
}

export default RouterTest;

这是最简单的一个路由的实现。在实际的开发中，一般来讲我们会在上方或左侧简历导航栏，通过给导航栏元素添加<Link>来加载页面剩下的内容。听起来有点像iframe？但是路由切换不会像iframe一样直接加载一个页面进来，只是通过路径匹配组件的切换。

当然，实际的开发中我们也不会这么不规范的直接把路由都写在首页里，一般会单写一个router.js专门负责路由的控制。在后面的Dva框架中，我们会看到Dva把路由、公用组件、模型文件、服务文件等在创建工程时就帮我们分类好了，这样整个工程结构就非常清晰。