Wie kann ich in React Router v6 durch externe Komponenten navigieren?

Navigieren außerhalb von Komponenten in React Router v6

In React Router v5 ermöglichte das Erstellen eines globalen Verlaufsobjekts und dessen Übergabe an den Router die Navigation außerhalb von Komponenten. Dieser Ansatz ist jedoch in v6 nicht mehr möglich.

Benutzerdefinierter Router-Ansatz

Um dieses Problem zu beheben, können Sie einen benutzerdefinierten Router erstellen, der den Verlaufsstatus wie React Router v6-Router instanziiert. Zum Beispiel für einen BrowserRouter:

<code class="javascript">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}
    />
  );
};</code>

Dies leitet das benutzerdefinierte Verlaufsobjekt per Proxy an den Router weiter und verwaltet den Navigationsstatus. Ersetzen Sie den ursprünglichen Router durch diesen benutzerdefinierten:

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6 führt außerdem unstable_HistoryRouter für den Zugriff auf die Verlaufsinstanz ein:

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* ... */}
  </HistoryRouter>,
  root
);</code>

Dadurch wird eine Instanz exportiert der Verlaufsbibliothek, auf die außerhalb von React-Komponenten zugegriffen werden kann.

Datenrouter

In React Router v6.4 ist eine neue „unverbundene“ Navigationsmethode für Datenrouter verfügbar:

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

Diese Methode bietet direkten Zugriff auf die Navigationsfunktion des Routers und ermöglicht so die Navigation außerhalb von Komponenten mit Datenroutern.

Das obige ist der detaillierte Inhalt vonWie kann ich in React Router v6 durch externe Komponenten navigieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!