如何使用 React-Router 6 在 React 中访问历史记录

Question

我正在使用 React-Router 6 alpha，我想通过以下方式禁用浏览器的“后退”按钮：

• 检测返回事件，以及
• 检测到时，使用历史记录立即将浏览器转发。

在 React-Router 5 中，这将通过 App.js 中的以下代码完成：

window.addEventListener("popstate", () => {
  history.go(1);
}); 

...同时还使用以下内容

import { withRouter } from "react-router";

class Comp1 extends React.Component { 
    lots of stuff 
}
export default withRouter(Comp1)

问题是......不再有withRouter了。 没有什么可以包装导出，因此无法访问我可以看到的历史记录。 如果可能的话，我如何才能访问该历史记录？ 我仍然可以检测到后退按钮事件（一个警告框证明了这一点），但我看不到如何向前移动一个。

（暂时忽略此实现会消除组件中保持的任何状态——我只是想解决这个问题。）

Answer 1

你是对的，没有withRouter高阶组件来注入history道具，但有一个useNavigate钩子，它基本上取代了 v5 useHistory钩子。

使用导航

useNavigate钩子返回一个函数，让您以编程方式导航，例如在提交表单之后。

• 传递您想要进入历史堆栈的增量。 例如，navigate(-1) 相当于点击后退按钮。

您可以使用navigate(1)强制向前导航

const navigate = useNavigate();

// lots of stuff

...

navigate(1);

当然，这仅适用于功能组件，但创建自己的 HOC 来包装和传递navigate道具并与withRouter用途withRouter相同，这将是一件微不足道的事情。

const withNavigate = WrappedComponent => props => {
  const navigate = useNavigate();

  return <WrappedComponent {...props} navigate={navigate} />;
};