也来写一篇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 = ()=>(
    
404
)
const login=()=>(
    
登录页
)
class Routes extends Component {
    render() {
        return (
            
//Switch用于匹配唯一Route 不使用的会报错
                
                    
                    
//路由为'/'一定要写在最后 不然会被匹配多次
//利用Route的render方法实现嵌套
//这里的{history,location}参数，浏览器会自动传入 不用显示传入
                     (
                        
                            
                                
                                
                                
//Redirect 一定要写在这里 当前面三个路由都不匹配 就会重定向至404页面
                                
                            
                        
                    )} />
                
            
        )
    }
}
export default Routes

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

export default class MyLayout extends Component{
    render(){
        return(
            
                
                    
                        菜单栏}>
                            Table
                           Form
                        
                    
                
                
                    
{this.props.children}
                
            
        )
    }
}

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

    
    (
character
)} />