How Can I Access and Use the History Object Outside of Components in React Router v6?

Navigating Outside of Components in React Router v6

In React Router v5, it was possible to create a history object outside of components and pass it to the Router for use in external contexts. However, this is not directly possible in React Router v6.

Custom Router Implementation

One workaround is to implement a custom router that instantiates the history state in a similar manner to React Router v6 routers. For instance:

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

This custom router consumes a custom history object and manages the navigation state. You can then swap out the default Router with this custom router to achieve the desired behavior.

unstable_HistoryRouter

An alternative approach is to utilize the unstable_HistoryRouter exported by React Router v6. It takes an instance of the history library as a prop, allowing you to use it externally.

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);

Please note that unstable_HistoryRouter may be subject to breaking changes in the future.

Navigating from the Router Directly (RRDv6.4 )

If you are using React Router v6.4 or later and not using Data routers, you can still access unstable_HistoryRouter. However, for Data routers, you can utilize the navigate function attached to the router object:

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

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

The above is the detailed content of How Can I Access and Use the History Object Outside of Components in React Router v6?. For more information, please follow other related articles on the PHP Chinese website!