Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-11-01 18:58:30
Original
593 Leute haben es durchsucht

How can I navigate outside components in React Router v6?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!