一、什么是React History
React History 是 React 官方提供的一款路由管理工具，主要用于帮助 React 应用实现路由跳转和管理。
相较于 React 自带的路由功能，React History 更为简介，易于上手。它提供了丰富的路由管理 API，可以让我们在项目中更加灵活地使用路由。
二、React History的使用
在 React 项目中使用 React History 非常简单，只需按照以下步骤即可：
1.安装 React History
// 使用 npm
npm install --save history
// 使用 yarn
yarn add history
2.创建 Router
创建 Router 是使用 React History 的第一步，我们可以使用 BrowserRouter、HashRouter、MemoryRouter 或 StaticRouter。
下面是一个基于 BrowserRouter 的实例：
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
);
}
export default App;
上述代码通过创建 BrowserRouter，为项目添加了两个路由："/"和"/about"。当用户访问这两个路由时，对应的组件将会被渲染。
3.Link组件
Link 组件是 React History 提供的一个组件，用于在应用中实现路由跳转。它类似于 a 标签，在点击时可以跳转到指定的路由。
下面是一个基于 Link 组件的实例：
import React from 'react';
import { Link } from 'react-router-dom';
function Navigation() {
return (
);
}
export default Navigation;
上述代码通过创建 Link 组件，为项目添加了两个路由链接："/"和"/about"。
4.编程式导航
使用编程式导航，可以在代码中直接跳转到指定的路由。
import React from 'react';
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
function handleClick() {
history.push('/about');
}
return (
Home
);
}
export default Home;
上述代码中，我们使用 useHistory hook 获取 history 对象，然后在点击按钮时调用 history.push 方法，跳转到指定路由。
三、React History API
React History 提供了丰富的路由管理 API，下面我们来介绍一些常用的 API。
1.history.push
history.push 方法可以实现路由跳转，它会将新的路由添加到历史堆栈中。
下面是一个使用 history.push 的示例：
import React from 'react';
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
function handleClick() {
history.push('/about');
}
return (
Home
);
}
export default Home;
2.history.replace
history.replace 方法也可以实现路由跳转，但是它会替换当前路由，而不是将新的路由添加到历史堆栈中。
下面是一个使用 history.replace 的示例：
import React from 'react';
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
function handleClick() {
history.replace('/about');
}
return (
Home
);
}
export default Home;
3.history.goBack
history.goBack 方法可以将用户返回到历史堆栈中的上一个路由。
下面是一个使用 history.goBack 的示例：
import React from 'react';
import { useHistory } from 'react-router-dom';
function About() {
const history = useHistory();
function handleClick() {
history.goBack();
}
return (
About
);
}
export default About;
4.history.goForward
history.goForward 方法可以将用户前进到历史堆栈中的下一个路由。
下面是一个使用 history.goForward 的示例：
import React from 'react';
import { useHistory } from 'react-router-dom';
function Home() {
const history = useHistory();
function handleClick() {
history.goForward();
}
return (
Home
);
}
export default Home;
5.history.listen
history.listen 方法可以监听路由的变化，并执行回调函数。
下面是一个使用 history.listen 的示例：
import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
function App() {
const history = useHistory();
const [location, setLocation] = useState(history.location);
useEffect(() => {
const unlisten = history.listen(location => {
setLocation(location);
});
return unlisten;
}, [history]);
return (
Current location: {location.pathname}
);
}
export default App;
上述代码中，我们使用 useEffect hook 监听 history 变化，并在每次变化时更新组件的状态。
四、总结
React History 是 React 官方提供的一款路由管理工具，它简单易用，提供了丰富的路由管理 API，可以让我们更加灵活地使用路由。在使用 React History 时，我们可以通过创建 Router、Link 组件和编程式导航来实现路由跳转，并使用 history API 来管理路由。
在我们的应用中要使用React History，我们需要有路由跳转的需求，同时使用Code Splitting(代码拆分) 。通常情况下，我们还需要使用 withRouter 或 useHistory 将 router 对象传递给我们的组件。
