Bagaimana untuk Menavigasi Luar Komponen dalam Penghala Reaksi v6?

react router v6: Navigasi Luar Komponen

React Router v6 memperkenalkan perubahan dalam cara objek sejarah dikendalikan. Semasa dalam v5, anda boleh mencipta objek sejarah yang dikongsi dan menghantarnya kepada Penghala, v6 memerlukan pendekatan yang berbeza.

Masalah:

Bagaimana anda boleh menavigasi dari luar komponen dalam penghala tindak balas v6, serupa dengan kelakuan dalam v5?

Penyelesaian:

Untuk meniru gelagat sebelumnya, anda boleh mencipta penghala tersuai yang menunjukkan keadaan sejarah seperti yang dilakukan dalam penghala RRDv6:

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

Sertakan penghala tersuai ini dalam aplikasi anda dan lulus objek sejarah tersuai anda:

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

Kemas kini:

React Router v6 memaparkan penghala sejarah, membolehkan anda menghantar contoh 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>

Nota untuk RRDv6.4 :

Untuk RRDv6.4 dan Penghala data, navigasi di luar komponen menggunakan fungsi navigasi 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 Luar Komponen dalam Penghala Reaksi v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!