也来写一篇Router4出坑指南

需求：实现一个有登录、404和主页路由的单页应用。
功能分析：有登录、404、主页三个主路由，主页是一个单页应用，点击左侧的菜单，右边的组件部分会切换。
效果图如下：

image.png

import React, {Component} from 'react';
import {
    BrowserRouter,
    Route,
    Link,
    Redirect,
    Switch
} from 'react-router-dom'
import MyLayout from '../layout/layout'
import TableDemo from '../testComponent/tableDemo'
import FormDemo from '../testComponent/formDemo'

const page404 = ()=>(
    <div>404</div>
)
const login=()=>(
    <h1>登录页</h1>
)
class Routes extends Component {
    render() {
        return (
            <BrowserRouter>
//Switch用于匹配唯一Route 不使用的会报错
                <Switch>
                    <Route path="/login"  component={login}/>
                    <Route path='/404' component={page404}/>
//路由为'/'一定要写在最后 不然会被匹配多次
//利用Route的render方法实现嵌套
//这里的{history,location}参数，浏览器会自动传入 不用显示传入
                    <Route path="/" render={({history,location}) => (
                        <MyLayout history={history} location={location}>
                            <Switch>
                                <Route path="/" exact component={TableDemo}/>
                                <Route path="/tableDemo"  component={TableDemo}/>
                                <Route path="/formDemo"  component={FormDemo}/>
//Redirect 一定要写在这里 当前面三个路由都不匹配 就会重定向至404页面
                                <Redirect to='/404'/>
                            </Switch>
                        </MyLayout>
                    )} />
                </Switch>
            </BrowserRouter>
        )
    }
}
export default Routes

v4版本与v3写法很大不同在于，不再支持v3的嵌套式路由写法。在上述代码中，通过Route的render方法可以实现路由嵌套写法，并且在MyLayout组件中，仍能通过this.props.children访问到嵌套的子路由。

export default class MyLayout extends Component{
    render(){
        return(
            <Layout style={{height:"100%"}}>
                <Sider>
                    <Menu theme="dark"
                          openKeys={["sub1"]}
                          mode="inline">
                        <SubMenu key="sub1" title={<span>菜单栏</span>}>
                            <Link to='/tableDemo'>Table</Link>
                           <Link to='/formDemo'>Form</Link>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout>
                    <div className={style.red}>{this.props.children}</div>
                </Layout>
            </Layout>
        )
    }
}

没有IndexRoute的情况下配置默认路由 使用Redirect

<Switch>
    <Route path={`${UPPER_PATH}/user`} component={UserManageCtnr} />
    <Route path={`${UPPER_PATH}/character`} component={()=>(<div>character</div>)} />
    <Route path={`${UPPER_PATH}/adapter`} component={AdapterManageCtnr} />
    <Redirect exact path={`${UPPER_PATH}`} to={{pathname: `${UPPER_PATH}/user`}} />
</Switch>