搭建一个React-redux-router + antd项目（

前面两篇写了如何初始化一个项目以及安装 redux、router、axios和antd

搭建一个React-redux-router + antd项目（一）初始化项目
搭建一个React-redux-router + antd项目（二）安装 redux、router、axios和antd

下面搭建路由，实现页面间的跳转。

在src目录下新建一个main文件夹用来存放后续的页面组件文件，在main下创建一个/index/index.js 文件夹，并创建一个Index组件：

// src/main/index/index.js
import React, {Component} from "react";

export default class Index extends Component {
  render() {
    return(
      <div>首页</div>
    )
  }
}

在src目录下新建一个router文件夹用来存放路由文件，在router目录下创建一个/router/router.js的文件夹，并创建一个Router路由组件：

// src/router/router.js
import React, {Component} from "react";
import {Switch, Route, Redirect} from "react-router-dom";
// 引入前面创建的Index组件
import Index from "../main/index/index"

export default class Router extends Component {
  render() {
    return(
      <Switch>
        {/* 使用Redirect指定/index为默认首页 */}
        <Route path="/" exact render={() => (<Redirect to="/index" />)} />
        <Route path="/index" component={Index} />
      </Switch>
    )
  }
} 

打开App.js，引入路由

// app.js
- import { Button } from 'antd';
+ import Rounter from './router/router'

  <div className="App">
-   <Button type="primary">Button</Button>
+   <Rounter />
  </div>

打开Index.js，指定路由跳转方式

+ import { HashRouter } from "react-router-dom";
+ <HashRouter>
    <App />
+ </HashRouter>

也可以使用 BrowserRouter 但这里建议使用 HashRouter 配置简单，BrowserRouter需要后台配合使用。
此时已配置好首页的路由了，因为已将Index 设为了默认首页 这时候访问 localhost:3000时会自动访问localhost:3001/#/index，页面中会出现“首页”二字。

搭建一个React-redux-router + antd项目（四）redux初始
搭建一个React-redux-router + antd项目（五）用action更新store
搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化