使用历史反应路由器 dom - Javascript

简介

历史反应路由器 (History-React-Router) 是一个用于处理路由和历史记录的 JavaScript 库。它是 React Router 的一部分，但也可以单独使用。

安装

使用 npm 安装：

npm install history

或者使用 yarn 安装：

yarn add history

使用

创建历史对象

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

创建一个浏览器历史对象，它会监听URL的变化，并且在URL发生变化时，会触发 location 对象的变化。

使用历史对象

history.push('/path');

使用 push 方法将新路径添加到历史记录中，并且通过浏览器加载新页面。

history.replace('/path');

使用 replace 方法将新路径添加到历史记录中，并且不会通过浏览器加载新页面，而是直接更新当前页面的URL。

history.back();

使用 back 方法返回到历史记录中的上一个路径。

history.forward();

使用 forward 方法前进到历史记录中的下一个路径。

监听历史变化

history.listen((location, action) => {
  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
  console.log(`The last navigation action was ${action}`);
});

使用 listen 方法监听历史对象的变化。每当历史对象的 location 属性被修改时，回调函数将被调用，并且会传递两个参数： location 和 action 。

获取当前位置

const location = history.location;
console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);

使用 location 属性获取当前位置信息。

总结

历史反应路由器是一个用于处理路由和历史记录的 JavaScript 库。在 React 项目中使用它可以轻松地管理 React 组件的路由和历史记录。