<p>Saya memulakan projek React menggunakan <code>react-router-dom</code> versi 6.4.0 tetapi saya tidak boleh membuat pengepala biasa untuk semua laluan. </p> <p>App.js - Ini ialah fail yang saya tambahkan <code>RouterProvider</code></p> <pre class="brush:php;toolbar:false;">import logo daripada './logo.svg'; import './App.css'; import { Link, Outlet, RouterProvider } daripada "react-router-dom"; import { routers } dari "./routes/routes"; fungsi Apl() { kembali ( <RouterProvider router={router}> <div>Tajuk</div> <Alur keluar /> </RouterProvider> ); } eksport Apl lalai;</pre> <p>routes.js - Dalam fail ini saya akan mencipta semua laluan</p> <pre class="brush:php;toolbar:false;">import { createBrowserRouter, redirect } daripada "react-router-dom"; import Perihal dari "../pages/About/About"; import Laman Utama dari "../pages/Home/Home"; import { getUser, isAuthenticated } daripada "../sso/authUtil"; const authLoader = () => if (!isAuthenticated()) { return redirect("https://google.com"); } lain { kembalikan getUser(); } }; eksport const router = createBrowserRouter([ { laluan: "/", elemen: <Laman Utama />, pemuat: authLoader, }, { laluan: "/tentang", elemen: <Mengenai />, }, ]);</pre> <p>Home.js - Fail ini ialah halaman utama dan mengandungi pautan ke halaman lain serta tajuk</p> <pre class="brush:php;toolbar:false;">import React daripada "react"; import { Link, Outlet, useLoaderData } daripada "react-router-dom"; const Laman Utama = () => const loaderData = useLoaderData(); kembali ( <> <div>Tajuk</div> <Pautan ke="/">Laman Utama</Pautan> <Pautan ke="/about">About</Link> <div>Laman Utama: {loaderData}</div>{" <Alur keluar /> </> ); } eksport lalai Laman Utama;</pre> <p>About.js - Ini ialah komponen biasa yang mewakili tentang</p> <pre class="brush:php;toolbar:false;">import React daripada "react"; const Tentang = () => kembali <div>Mengenai</div>; }; eksport lalai Mengenai;</pre> <p>Saya mahu <kod>Laman Utama</kod> dan <kod>Mengenai</kod> </p>

const Layout = () => (
  <>
    <CommonHeader />
    <Outlet />
  </>
);

const routers = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        path: "/",
        element: <Home />,
        loader: authLoader
      },
      {
        path: "/about",
        element: <About />
      }
    ]
  }
]);

function App() {
  return <RouterProvider router={routers} />;
}