导入 useHistory react-router-dom 版本 6

在 React Router 的版本 6 中，useHistory 是从 react-router-dom 中导入的新 hook。它可以让你在 React 组件中访问路由历史栈。

导入 useHistory

要使用 useHistory ，首先需要从 react-router-dom 中导入它：

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

使用 useHistory

useHistory 是一个 hook，使用它需要在函数组件中进行。要使用它，只需在组件中调用它，它将返回一个对象，该对象具有访问路由历史栈的方法。例如：

function MyComponent() {
  const history = useHistory();

  function handleClick() {
    history.push('/about');
  }

  return (
    <button onClick={handleClick}>
      Go to About
    </button>
  );
}

上面的组件中，我们使用 useHistory hook 来获取路由历史栈。然后，我们定义了一个 handleClick 函数，它将调用 history.push 方法，将用户导航到 /about 路由。最后，我们返回了一个按钮，当点击时会触发 handleClick 函数。

属性

useHistory hook 不接收任何属性。

返回值

useHistory hook 返回一个包含以下属性的对象：

• push(path: string, state?: any): void：将用户导航到指定路由。
• replace(path: string, state?: any): void：将用户替换为指定路由。
• go(n: number): void：将用户向前或向后将路由历史栈上的条目移至指定位置。
• goBack(): void：将用户导航回到前一个路由。
• goForward(): void：将用户前进到下一个路由。
• length: number：路由历史栈中的条目数。

总结

useHistory hook 是 React Router v6 中的一个很有用的 hook，它让你能够在组件中访问路由历史栈。要使用它，只需从 react-router-dom 中导入并调用即可。