Wie kann ich außerhalb von Komponenten in React Router v6 auf das Verlaufsobjekt zugreifen und es verwenden?

Navigieren außerhalb von Komponenten in React Router v6

In React Router v5 war es möglich, ein Verlaufsobjekt außerhalb von Komponenten zu erstellen und es zur Verwendung an den Router zu übergeben in externen Kontexten. Dies ist jedoch in React Router v6 nicht direkt möglich.

Benutzerdefinierte Router-Implementierung

Eine Problemumgehung besteht darin, einen benutzerdefinierten Router zu implementieren, der den Verlaufsstatus auf ähnliche Weise wie React Router v6-Router instanziiert. Zum Beispiel:

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}
    />
  );
};

Dieser benutzerdefinierte Router nutzt ein benutzerdefiniertes Verlaufsobjekt und verwaltet den Navigationsstatus. Sie können dann den Standard-Router durch diesen benutzerdefinierten Router ersetzen, um das gewünschte Verhalten zu erreichen.

unstable_HistoryRouter

Ein alternativer Ansatz besteht darin, den von React Router v6 exportierten unstable_HistoryRouter zu verwenden. Es benötigt eine Instanz der Verlaufsbibliothek als Requisite, sodass Sie sie extern verwenden können.

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
);

Bitte beachten Sie, dass unstable_HistoryRouter in Zukunft möglicherweise wichtigen Änderungen unterliegt.

Navigation von direkt mit dem Router (RRDv6.4)

Wenn Sie React Router v6.4 oder höher verwenden und keine Verwendung von Datenroutern, Sie können trotzdem auf unstable_HistoryRouter zugreifen. Für Datenrouter können Sie jedoch die Navigationsfunktion verwenden, die dem Router-Objekt zugeordnet ist:

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

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

Das obige ist der detaillierte Inhalt vonWie kann ich außerhalb von Komponenten in React Router v6 auf das Verlaufsobjekt zugreifen und es verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!