Wie navigiere ich programmgesteuert im React Router ohne Mixins?

Programmatische Navigation in React Router ohne Mixins

React Router ermöglicht eine nahtlose Navigation durch den Kontext, aber das Verständnis seiner Verwendung kann verwirrend sein. Lassen Sie uns untersuchen, wie man programmgesteuert navigiert, ohne Mixins zu verwenden.

React Router stellt das Verlaufsobjekt über den Kontext bereit und bietet Zugriff auf die Push- und Ersetzungsmethoden zur Manipulation. Mit der Weiterentwicklung von React stehen Ihnen jedoch mehrere Optionen für die programmatische Navigation zur Verfügung:

1. Nutzen Sie den withRouter HOC (React Router 6 wird nicht unterstützt):

Der withRouter HOC fügt das Verlaufsobjekt in Komponenten-Requisiten ein und ermöglicht so den direkten Zugriff auf Navigationsmethoden.

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

const Button = withRouter(({ history }) => {
  const handleClick = () => { history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
});

2. Rendern Sie eine Route ohne Pfad (React Router 6 wird nicht unterstützt):

Rendern Sie eine Routenkomponente ohne Pfad, die immer mit dem aktuellen Standort übereinstimmt und auch die Verlaufsstütze übergibt.

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

const Button = () => {
  return (
    <Route render={({ history }) => {
      const handleClick = () => { history.push('/new-location'); };
      return <button onClick={handleClick}>Click Me!</button>;
    }} />
  );
};

3. Nutzen Sie den Kontext (komplex und veraltet):

Dieser Ansatz erfordert ein tiefes Verständnis des React-Kontexts und sollte mit Vorsicht verwendet werden. Sie müssen einen Komponentenkontexttyp definieren, um auf die Verlaufsstütze zuzugreifen.

import React from 'react';

const Button = (props, context) => {
  const handleClick = () => { context.history.push('/new-location'); };
  return <button onClick={handleClick}>Click Me!</button>;
};

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
};

Für die meisten Szenarien sorgen die Optionen 1 und 2 für Einfachheit und werden empfohlen.

Das obige ist der detaillierte Inhalt vonWie navigiere ich programmgesteuert im React Router ohne Mixins?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!