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

Question

I am using React-Router 6 alpha, and I would like to disable the browser "Back" button by:

• Detecting the back event, and
• On detection, using the history to immediately send the browser forward.

In React-Router 5, this would accomplished with the following code in App.js:

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

...while also using the following

import { withRouter } from "react-router";

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

The problem is... there is no withRouter , anymore. There's nothing to wrap the export in, and consequently no access to the history that I can see. How can I get access to that history, if it's possible at all? I can still detect the Back button event (an alert box proves that) but I can't see how to move forward by one.

(Ignore for the moment that this implementation obliterates any state held in the component-- I'm just trying to get my arms around this.)

Answer 1

You are correct, there isn't a withRouter Higher Order Component to inject a history prop, but there is a useNavigate hook that essentially replaces the v5 useHistory hook.

useNavigate

The useNavigate hook returns a function that lets you navigate programmatically, for example after a form is submitted.

• Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button.

You can force a forward navigation with navigate(1)

const navigate = useNavigate();

// lots of stuff

...

navigate(1);

This, of course, only works in functional components, but it would be a trivial matter to create your own HOC to wrap and pass a navigate prop to and serve much the same purpose as withRouter .

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

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