Wie navigiere ich programmgesteuert in React Router v4, v5 und v6?

Programmgesteuertes Navigieren mit React Router

In React Router ermöglicht das Link-Element die native Navigation mithilfe von Hyperlinks. Für die programmatische Navigation über Links hinaus können Sie jedoch die folgenden Methoden nutzen.

React Router v6.6.1 und höher: useNavigate Hook

Verwenden Sie den useNavigate-Hook wie folgt:

import { useNavigate } from "react-router-dom";

function HomeButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v5.1.0 und höher: useHistory Hook

Für funktionale Komponenten sollten Sie den useHistory-Hook in Betracht ziehen:

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v4: Multiple Approaches

1. mitRouter-Komponente höherer Ordnung

Injizieren Sie die History-Objekt als Komponenten-Requisite:

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

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

2. Zusammensetzung und gerenderte Route

Rendern Sie eine weglose Route, die immer mit dem aktuellen Standort übereinstimmt, und stellen Sie sicher, dass dies der Fall ist die History-Methoden über die History prop:

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

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

3. Context

Zugriffsverlauf über die React Context API:

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

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

Der Einfachheit halber: Wir empfehlen die Verwendung der withRouter-Komponente höherer Ordnung oder das Rendern einer weglosen Route mit Komposition.

Das obige ist der detaillierte Inhalt vonWie navigiere ich programmgesteuert in React Router v4, v5 und v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!