使用 useHistory 与 React 路由交互

useHistory 是 React 路由提供给使用 React Hooks 的开发者的一个方法。它可以让你在组件中跳转到不同的路由，以及在历史操作中进行前进和后退。

安装

首先，你需要在你的项目中安装 react-router-dom 依赖包，你可以通过运行以下命令来安装它：

npm install react-router-dom

使用

一旦你安装了 react-router-dom，你可以在组件中导入 useHistory 方法。

import { useHistory } from 'react-router-dom';

使用 useHistory 很简单，你只需要在你的组件内部调用它，并将返回的方法存储在常量或变量中。你可以通过以下方式定义它：

const history = useHistory();

现在，你可以使用 push 方法来导航到新的路由：

history.push('/about');

你可以传入任何有效的路径（字符串）到 push 方法中。

如果你需要回退到上一个页面，你也可以使用 goBack 方法：

history.goBack();

如果你需要前进到下一个页面，你可以使用 goForward 方法：

history.goForward();

你也可以在你的组件中监听路由更改事件来执行一些特定的行为。你可以使用 useEffect 钩子并将 history 作为依赖项来实现这一点：

import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

function MyComponent() {
  const [pageName, setPageName] = useState('');

  const history = useHistory();

  useEffect(() => {
    setPageName(history.location.pathname);
  }, [history]);

  return (
    <>
      <h1>{pageName}</h1>
      <button onClick={() => history.push('/about')}>Go to about</button>
    </>
  );
}

在这个例子中，我们会在每次路由更改时更新页面名称的状态。因为我们包含了 history 在我们的 useEffect 的依赖项中，所以每当路由更改时，我们都可以获取最新的 history 方法。

总结

useHistory 可以让你在 React 组件中跟踪和导航路由历史。它非常方便易用，而且不需要太多的代码即可实现。