react+AntDesign 搭建并配置router路由

一、创建项目

// 这一步可以详细的看AntDesign的文档
https://ant.design/docs/react/use-with-create-react-app-cn

1、yarn create react-app ‘项目名称’ // 创建项目

2、cd ‘项目名称’ // 进入创建好的项目文件

3、yarn start // 启动项目

二、router路由配置

1、安装路由 cnpm install react-router-dom --save

2、在src目录下建立router文件，文件内建立router.js

3、安装 cnpm install history --save

createHashHistory: 用于希望将位置存储在当前URL中以避免在页面重新加载时将其发送到服务器的情况

import login from '../login'; 
import homePage from '../pages/Home/index';  
import React from 'react';
import {Router, Route, Switch, Redirect} from 'react-router-dom';
import { createHashHistory } from "history";
const history = createHashHistory();

class RouterConfig extends React.Component{
    render(){
        return(
            <Router history={history}>
                <Switch>
                    <Route path='/' exact render={()=>(
                        <Redirect to='/login'/>
                    )}/>
                    <Route path='/login' component={login}/>
                    <Route path='/homePage' component={homePage}/>
                </Switch>
            </Router>
        )
    }
}
export default RouterConfig;