记录一次简单且容易犯的React Hook Router 相关错误

发现原因:这个错误是在引用前同事导航组件时产生的

错误描述:在使用组件时发现路由url已经改变但页面未跳转

参考资料:

https://blog.csdn.net/hsany330/article/details/106196896

https://majing.io/posts/10000050881248

解决方案:

 
//header.js 组件
//withRouter组件将注入history对象作为该组件的属性。这样,不需要处理context,可直接访问push和replace方法。
import { withRouter } from 'react-router-dom'

const Head = withRouter(({ history, container, setContainer, items}) => {
    // ...
    //引用history
    <Menu>
             <Menu.Item
              onClick={() => {
                history.push('/')
              }}
            >
              首页
             </Menu.Item>
    </Menu>
}

export default Head
上一篇:如何使用在 React Router v4 中以编程的方式进行导航


下一篇:【React -- 9/100】 抽离顶部导航栏 - [组件复用]