react管理系统使用antd时路由与左侧导航相关联
·
在使用antd的框架时,左侧导航栏与路由绑定切换,menu的selectedKeys与menu.item的key应该都是路由形式的。

render() {
// 得到当前请求的路由路径
let path = this.props.location.pathname;
console.log(path,'path')
return (
// <HashRouter>
<Layout>
<Sider trigger={null}>
<div className="logo" > 后台管理 </div>
<Menu theme="dark" mode="inline" selectedKeys={[path]} defaultSelectedKeys={['0']} >
{
routes.map((item, index) => {
if (item.sideShow) {
return (
<Menu.Item key={item.path}>
<NavLink to={item.path || '#'} >
<span>{item.title}</span>
</NavLink>
</Menu.Item>
)
}
})
}
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
<a className='logout'}>退出</a>
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
<Switch>
{
console.log(routes, 'routes'),
routes.map((item, index) => {
if (item.children && item.children.length > 0) {
return (
<Route path={item.path} key={index} render={() => (
<item.component> {
item.children.map((children, childrenKey) => {
return (
<Route path={children.path} key={children.path} component={children.component}></Route>
)
})
}
</item.component>
)} ></Route>
)
} else if (item.path != '/login') {
return (
<Route path={item.path} key={index} component={item.component}></Route>
)
}
})
}
<Redirect from='/' exact to='/home' />
</Switch>
</Content>
</Layout>
</Layout>
);
}
这样,就可以实现左侧导航与路由绑定


更多推荐


所有评论(0)