react-router v6使用createHashHistory进行history.push时，url改变页面不渲染

问题描述
在我使用history库的createHashHistory创建history对象时，使用history.push进行页面跳转的时候，url 变化，但是页面没有渲染。

import {createHashHistory } from 'history'
const history = createHashHistory({window})
history.push("/");

1
2
3
4

解决方法
经查阅是因为push操作只是修改了props里的属性，不会触发页面渲染，还需要监听 history 的变化，手动重新渲染页面。（可参考：: react-router-dom v6 组件外使用路由跳转）
因为太麻烦，没有采用。
最终使用了react-router-dom中的useNavigate进行页面跳转。

import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()//useNavigate需要在函数组件内部使用
navigate("/");

1
2
3
4

navigate的使用方法可以参考博客：react-router-dom 在hook中的使用 v6 和 v5的对比

需要注意的是:，useNavigate方法只能在函数式组件中使用， 在类组件中是不能够使用hooks的。

函数式组件和类组件的区别