React之动态路由、编程是导航

简单模拟动态路由、编程是导航：
登录页：根据路由传参

路由页：采用路由嵌套，并通过props赋值给route将参数传入到Home页

Home页，通过路由props中route获取参数

路由例子

路由跳转

import React from 'react'
import { Menu } from 'antd';
import Menus from './MenuList' //导航数据
import { Link } from 'react-router-dom'
import './index.less'

//SubMenu :antd里的导航模板标签、二级标签  Menu.Item  ：一级标签
const SubMenu = Menu.SubMenu;

class NavList extends React.Component{
    
    //递归调用，多级导航
    renderNav(){
        return this.renderMenuItem(Menus)
    }
    //根据导航数据，递归遍历生成多级导航
    renderMenuItem(arr){
        return arr.map((item)=>{
            if(item.children){
                return (
                    <SubMenu key={item.path} title={item.title}>
                        {this.renderMenuItem(item.children)}
                    </SubMenu>
                )
            }else{
                return  <Menu.Item key={item.path}>
                            <Link to={item.path}>{item.title}</Link>
                        </Menu.Item>
            }
        })
    }

    render(){
        return(
            <div className='navleft'>
                <div className='title'>
                      <img src="/asset/logo.svg" alt=""/>
                      <h2 id='title'>mymanage</h2>
                </div>
                <Menu  theme ='dark' style={{ width: 256 }} >
                  {this.renderNav()}
                </Menu>
            </div>
        )
    }
}

export default NavList

//***************  嵌套路由  ******************

import React from 'react'
import {BrowserRouter as Router,Route,Switch,Redirect}  from 'react-router-dom'  
   // 引入路由相关标签，as起别名
import Admin from '../pages/Home/Home'
import Login from '../pages/Login/Login'
import NotFind from '../pages/NotFind/NotFind'
import User from '../pages/User/User'
import GoodsLlist from '../pages/Goods/List'

class Header extends React.Component{
    render(){
        return(
            <Router>
                <div>     
                <hr/>
                <Switch>
                    <Route exact path='/'>
                        {/* 路由重定向 Redirect */}
                        <Redirect to='/login'></Redirect>
                    </Route> 
                    <Route path='/login' component={Login}></Route> 
                        {/* 嵌套路由 */}
                    <Route path='/admin/:id' render={(props)=>{
                        return <Admin route={props}>
                                    <Route exact path='/admin' component={GoodsLlist}></Route>
                                    <Route path='/admin/user' component={User}></Route>
                                    <Route path='/admin/goods/list' component={GoodsLlist}></Route>
                                </Admin>
                         }}>
                    </Route> 
                    {/* Switch 设置没匹配路径，则到404组件页面 */}
                    <Route  component={NotFind}></Route> 
                </Switch>
                </div>
            </Router>
        )
    }
}
export default Header