简单模拟动态路由、编程是导航:
登录页:根据路由传参
路由页:采用路由嵌套,并通过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