Bagaimanakah saya boleh menavigasi komponen luar dalam React Router v6?

Menavigasi Komponen Luar dalam React Router v6

Dalam React Router v5, mencipta objek sejarah global dan menghantarnya ke navigasi yang didayakan penghala di luar komponen. Walau bagaimanapun, pendekatan ini tidak lagi boleh dilakukan dalam v6.

Pendekatan Penghala Tersuai

Untuk menangani perkara ini, anda boleh mencipta penghala tersuai yang menyatakan keadaan sejarah seperti penghala React Router v6. Contohnya, untuk 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>

Ini memproksikan objek sejarah tersuai ke dalam Router dan mengurus keadaan navigasi. Gantikan Penghala asal dengan yang tersuai ini:

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6 juga memperkenalkan unstable_HistoryRouter untuk mengakses contoh sejarah:

<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>

Ini mengeksport instance pustaka sejarah, yang boleh diakses di luar komponen React.

Penghala Data

Dalam React Router v6.4 , kaedah navigasi "tidak tersambung" baharu tersedia untuk penghala Data:

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

Kaedah ini menyediakan akses kepada fungsi navigasi penghala secara langsung, membenarkan navigasi di luar komponen dengan penghala Data.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menavigasi komponen luar dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!