useNavigate使用报错

背景

使用react做路由跳转，link标签适用于点击跳转，但是涉及到不是点击元素的跳转，这时候一般是使用history.push完成。但是第一次使用react17版本，react-router-dom没有导出useHistory，离谱了，查了发现现在17版本使用的是useNavigate，但是我直接使用useNavigate（）就报错。

错误

useNavigate() may be used only in the context of a component

解决

查询发现useNavigate需要在BrowserRouter（也是17版本的？之前记得是Router，公司项目都用不上这些玩意，框架都封装好的）子孙元素中使用才行。然后发现我本来就是这么使用的。又一个离谱，排查很久发现是需要将调用的useNavigate的hooks单独写成组件，也就是说BrowserRouter和useNavigate不能在一个组件中出现。将BrowserRouter放在最外层组件或者用到useNavigate的地方单独抽成一个组件写。