在使用antd的框架时,左侧导航栏与路由绑定切换,menu的selectedKeys与menu.item的key应该都是路由形式的。
设置key值为path

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>
        );
    }

这样,就可以实现左侧导航与路由绑定
Home页
user页

更多推荐