Bagaimana untuk Navigasi Secara Pengaturcaraan dalam React Router v4, v5, dan v6?

Menavigasi Secara Pengaturcaraan dengan React Router

Dalam React Router, elemen Pautan mendayakan navigasi asli menggunakan hiperpautan. Walau bagaimanapun, untuk navigasi program melangkaui pautan, anda boleh memanfaatkan kaedah berikut.

React Router v6.6.1 dan Di Atas: useNavigate Hook

Gunakan useNavigate hook seperti berikut:

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 dan Di atas: useHistory Hook

Untuk komponen berfungsi, pertimbangkan useHistory hook:

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: Pelbagai Pendekatan

1. dengan Router Higher-Order Komponen

Suntikan objek sejarah sebagai prop komponen:

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

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

2. Komposisi dan Laluan Render

Memberikan laluan tanpa laluan yang sentiasa sepadan dengan lokasi semasa, menyediakan kaedah sejarah melalui sejarah prop:

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

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

3. Konteks

Sejarah akses melalui API Konteks React:

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

Untuk kesederhanaan, kami syorkan menggunakan komponen tertib tinggi withRouter atau memberikan laluan tanpa laluan dengan komposisi.

Atas ialah kandungan terperinci Bagaimana untuk Navigasi Secara Pengaturcaraan dalam React Router v4, v5, dan v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!