React-Router4 嵌套路由实现的两种方式以及路由过渡动画的实现方式

刚学习react的路由 一个小的后台管理demo

目录结构

// 后台管理页面通常有两种布局方式 
// 一种是没有导航栏的 登录页面
// 一种是含有导航栏的 各功能性页面 
// 导航栏不需要每次都渲染  Layout中含有导航栏 和 传递进来的子组件即可
// 大致思路就是  登录页面和Layout页面同级 切换路由的时候 切换Layout中的子组件
src
	pages
		Layout // 这里有导航侧边栏
	App.js

方式1

App.js

import React, {
    Component } from 'react'
// router
import {
    HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
// redux
import {
    Provider } from 'react-redux'
import {
    createStore } from 'redux'
import reducer from '@store'
// 消息提醒
import {
    message } from 'antd'
// 页面组件
import Login from '@pages/Login/'
import Layout from '@pages/Layout/'
import Index from '@pages/Index/'
import Table from '@pages/Table/'
import Ani from '@pages/Animation/'

//创建store
const store = createStore(reducer)
const requireAuth = (Child, props) => {
   
// 一个简单的验证  demo  不要在意这些细节
    let userData = window.localStorage.getItem('userData')
    try {
   
        userData = JSON.parse(userData)
    } catch (error) {
   
        return <Redirect to="/login" />
    }
    if (userData && userData.name) {
   
        return <Child {
   ...props} />
    } else {
   
        message.error('登录已过期，请重新登录')
        return <Redirect to="/login" />
    }
}
class App extends Component {
   
    render() {
   
        return (
            <Provider store={
   store}>
                <Router activeClassName="active">
                    <div>
                        <Switch>
                        
                            <Route path="/login" component={
   Login} />
                            {
   /* 写法1  将路由集中在一起 路由可以通过循环的方式添加 我这里写的demo就没有循环 */}
                            {
   /* 写法1  集中式的写法 注意 path = "/" 是父路由 所以不要写exact去完全匹配它 别的路由exact根据场景加或者不加 */}
                            <Layout path="/" component={
   Layout}>    
                                <Route
                                    exact
                                    path="/index"
                                    component={
   props =>
                                        requireAuth(Index, props)
                                    }
                                />
                                <Route
                                    exact
                                    path="/table"
                                    component={
   props =>
                                        requireAuth(Table, props)
                                    }
                                />
                                <Route
                                    exact
                                    path="/ani"
                                    component={
   props => requireAuth(Ani, props)}
                                /> 
                            </Layout>
                        </Switch>
                    </div>
                </Router>
            </Provider>
        )
    }
}

export default App

Layout.js

import React, {
    Component } from 'react'
// 通过withRouter来获取router的对象进行路由操作
import {
    withRouter } from 'react-router-dom'
import {
    Layout, Menu } from 'antd'
// 路由列表  通常是从后端获取的json数据  这里模拟的 [{path:'/', name:''} ...之类]
import routes from './routes'
const {
    Header, Content, Sider