React中使用withRouter使侧边栏高亮与页面展示一致

最新推荐文章于 2023-10-08 15:13:35 发布

92huahua

最新推荐文章于 2023-10-08 15:13:35 发布

阅读量427

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/120994852

版权

在使用antdUI的侧边栏在刷新页面后路由和侧边栏高亮不一致，那边就需要以下设置

// 在侧边栏页面引入withRouter
import { Link, withRouter } from "react-router-dom"
class Sider extends Component {
    render() {
        const path = this.props.location.pathname
        return (
            <>
                <Menu
                  theme={this.state.theme}
                  onClick={this.handleClick}
                  style={{ width: 200 }}
                  defaultOpenKeys={['sub1']}
                  selectedKeys={[path]} // 设置高亮的key
                  mode="inline"
                >
                  {
                    // react里没有指令，只能用map方法遍历数组
                    this.state.menuList.map((item,i)=>{
                      // return 一个标签  标签里要加上key，通常key用数组的下标
                      return <Menu.Item key={item.path}><Link to={item.path}>{item.title}</Link></Menu.Item>
                    })
                  }

                </Menu>
            </>
        )
	 }
}
export default withRouter(Sider)//使用withRouter导出组件