React路由的history对象的插件history的使用解读

React路由的history对象插件history使用

在react-router中组件里面的跳转可以用<Link>

但是在组件外面改如何跳转，需要用到react路由的history

首先是history的安装

npm install history --save

我创建了一个JS文件

方便各个文件引用

history.js
import { createBrowserHistory } from 'history'
const history = createBrowserHistory({
    basename: '',             //基链接
    forceRefresh: true        //是否强制刷新
});
export default history

history实现跳转

push    

使用push可以将一条新的历史记录推送到历史堆栈中

    history.push('/a');
    history.push('/a',{name: 'jac'});
    history.push({
        pathname: '/a',
        state: {
            name: 'jac'
        }
    });

replace方法和push方法使用形式一样，replace的作用是取代当前历史记录

• go：此方法用来前进或者倒退，history.go(-1);
• goBack：此方法用来回退，history.goBack();
• goForward：此方法用来前进，history.goForward();

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 两个路由器。

现象

使用了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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。