React中history问题记录
一、背景
在学习react的时候,创建了一个react+ts的项目框架。遇到一个问题,使用history无法进行页面跳转,即使跳转也无法渲染页面。特此记录,以免忘记。
二、创建项目
使用以下语法创建了一个简单的项目框架
create-react-app xxx --scripts-version=react-scripts-ts
三、history的用法
-
在react-router很大的程度上依赖history的功能。
-
history分为两类:BrowserHistory和HashHistory。分别对应的react-router-dom中的BrowserRouter和HashRouter 两个路由器。
-
在react-router很大的程度上依赖history的功能。
-
history分为两类:BrowserHistory和HashHistory。分别对应的react-router-dom中的BrowserRouter和HashRouter 两个路由器。
四、现象
使用了Router这个路由器,传入history属性,但是在使用createHashHistory 和 createBrowserHistory创建的history时,出现了问题:
路由发生了改变,页面并没有渲染。
五、原因
react-router-dom是基于react-router进行开发的。在npm中的history库中找到:
版本 5 的文档可以在docs目录中找到。这是当前的稳定版本。版本 5 用于 React Router 版本 6。
版本 4 的文档可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5
推测是版本的问题,于是将版本降低,能正常跳转。
六、解决方法
降低history版本,就可以解决无法渲染问题。
npm install history@4.1.0 -D