antd+react Menu随url切换选中项

最新推荐文章于 2024-07-23 10:43:02 发布

吃货菜鸡

最新推荐文章于 2024-07-23 10:43:02 发布

阅读量3k

点赞数

分类专栏： antd 文章标签： react url 前端

本文链接：https://blog.csdn.net/qq_32261717/article/details/118400536

版权

本文介绍如何在使用Antd和React时，使Menu组件的选中项根据URL变化而自动切换。在点击按钮跳转页面或刷新时，确保Menu正确显示当前页面对应的菜单项。通过引入withRouter并理解其工作原理，将路由信息传递给菜单组件，解决了刷新后菜单返回默认状态的问题，特别是对于包含二级菜单的情况，保证URL与菜单键的一致性，实现完美同步。

摘要由CSDN通过智能技术生成

问题：
1、当点击页面中的按钮切换到另一个页面时，menu选中项并没有跟着改变；
2、刷新页面时，url保持不变，content不变，但是menu会回到默认设置。

参考：antd中menu选中状态没有跟上路由[解决]

参考了大佬的方法，终于实现了！！！

先看一下withRouter的解释：react withRouter

代码实现

与大佬的方法不同点在于：
1、路由与菜单不再一个组件中写，所以history通过属性的方式传递

// routes/index.js
const IRouter = withRouter(({
    history }) => {
   
    return (
        // <withRouter>  最外层的withRouter去掉，不然会报警告
            <HashRouter>
                <Route path="/login" component={
   Login}></Route>
                <ILayout history={
   history}>    //=>将history传到实现菜单的组件中
                    <Switch>
                        <Route exact path="/" component={
   OrderList}></Route>
                        <Route path="/order/list" component={
   OrderList}></Route>
                        <Route path="/order/add" component={
   AddOrder}></Route>