React 6.4.0 Pengepala biasa untuk semua penghala

Question

Saya memulakan projek React menggunakan react-router-dom versi 6.4.0 tetapi saya tidak boleh membuat pengepala biasa untuk semua laluan.

App.js - Ini ialah fail yang saya tambahkan RouterProvider

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;

routes.js - Dalam fail ini saya akan mencipta semua laluan

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

Home.js - Fail ini ialah halaman utama dan mengandungi pautan ke halaman lain serta tajuk

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;

About.js - Ini ialah komponen biasa yang mewakili tentang

import React daripada "react";

const Tentang = () =>
  kembali <div>Mengenai</div>;
};

eksport lalai Mengenai;

Saya mahu Laman Utama dan Mengenai

Answer 1

Walaupun dalam react-router-dom@6.4.0, penghalaan dengan reka letak pemaparan UI generik masih berfungsi dengan baik.

Buat komponen laluan reka letak yang menjadikan komponen pengepala biasa dan satu untuk laluan bersarang Outlet.

Contoh:

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

Diimport dan diberikan pada laluan susun atur dalam konfigurasi Layout.

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

...

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