Bagaimanakah Saya Boleh Mengakses dan Menggunakan Objek Sejarah Di Luar Komponen dalam Penghala Reaksi v6?

Menavigasi Luar Komponen dalam React Router v6

Dalam React Router v5, adalah mungkin untuk mencipta objek sejarah di luar komponen dan menghantarnya ke Router untuk digunakan dalam konteks luaran. Walau bagaimanapun, ini tidak boleh dilakukan secara langsung dalam React Router v6.

Pelaksanaan Penghala Tersuai

Salah satu penyelesaian adalah dengan melaksanakan penghala tersuai yang menyatakan keadaan sejarah dengan cara yang serupa dengan penghala React Router v6. Contohnya:

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

Penghala tersuai ini menggunakan objek sejarah tersuai dan mengurus keadaan navigasi. Anda kemudiannya boleh menukar Penghala lalai dengan penghala tersuai ini untuk mencapai gelagat yang diingini.

unstable_HistoryRouter

Pendekatan alternatif ialah menggunakan unstable_HistoryRouter yang dieksport oleh React Router v6. Ia memerlukan contoh pustaka sejarah sebagai prop, membolehkan anda menggunakannya secara luaran.

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);

Sila ambil perhatian bahawa unstable_HistoryRouter mungkin tertakluk kepada pecah perubahan pada masa hadapan.

Menavigasi dari the Router Directly (RRDv6.4 )

Jika anda menggunakan React Router v6.4 atau lebih baru dan tidak menggunakan penghala Data, anda masih boleh mengakses unstable_HistoryRouter. Walau bagaimanapun, untuk penghala Data, anda boleh menggunakan fungsi navigasi yang dilampirkan pada objek penghala:

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

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses dan Menggunakan Objek Sejarah Di Luar Komponen dalam Penghala Reaksi v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!