Bagaimana untuk Menavigasi Komponen Luar dalam React Router v6?

Menavigasi Komponen Luar dalam React Router v6

Dalam React Router v5, mencipta objek sejarah global yang dibenarkan untuk navigasi yang mudah di luar komponen. Walau bagaimanapun, tingkah laku ini tidak kelihatan serta-merta dalam v6.

Menyesuaikan Navigasi dengan Penghala Tersuai

Salah satu pendekatan ialah mencipta penghala tersuai yang menggunakan objek sejarah tersuai dan mengurus keadaan navigasi. Diilhamkan oleh pelaksanaan BrowserRouter dalam v6:

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

Dengan menggunakan penghala tersuai ini dengan objek sejarah tersuai, ia secara berkesan memproksi objek sejarah dan mengurus keadaan navigasi.

Bertukar Penghala

Dalam aplikasi React, anda kemudian boleh menukar Penghala lalai untuk penghala tersuai:

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </CustomRouter>
  );
}</code>

Penghala Sejarah Tidak Stabil

react-router-dom@6 memperkenalkan ' tidak stabil' HistoryRouter yang membenarkan suntikan contoh pustaka sejarah tersuai:

<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}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);</code>

Perhatikan bahawa API ini ditandakan tidak stabil dan mungkin memerlukan penghalusan lanjut atau pertimbangan pengurusan pergantungan.

RRDv6.4 dengan Penghala Data

Dalam RRDv6.4 dengan Penghala Data, fungsi navigasi 'tidak stabil' didedahkan secara langsung oleh objek penghala:

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

const router = createBrowserRouter(...);

...

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

Atas ialah kandungan terperinci Bagaimana untuk Menavigasi Komponen Luar dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!