React 6.4.0 Gemeinsame Header für alle Router

Question

Ich starte ein React-Projekt mit react-router-dom, kann aber keinen gemeinsamen Header für alle Routen erstellen.

App.js – Dies ist die Datei, in der ich RouterProvider

hinzugefügt habe.

Logo importieren aus './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } aus „react-router-dom“;
import { routers } from "./routes/routes";

Funktion App() {
  zurückkehren (
    <RouterProvider router={routers}>
      <div>Kopfzeile</div>
      <Auslass />
    </RouterProvider>
  );
}

Standard-App exportieren;

routes.js – In dieser Datei werde ich alle Routen erstellen

import { createBrowserRouter, redirect } from "react-router-dom";
import About from "../pages/About/About";
Startseite importieren von „../pages/Home/Home“;
import { getUser, isAuthenticated } from "../sso/authUtil";

const authLoader = () =>
  if (!isAuthenticated()) {
    Return Redirect("https://google.com");
  } anders {
    return getUser();
  }
};

export const routers = createBrowserRouter([
  {
    Pfad: "/",
    Element: <Home />,
    Lader: authLoader,
  },
  {
    Pfad: "/about",
    Element: <Über />,
  },
]);

Home.js – Diese Datei ist die Startseite und enthält Links zu anderen Seiten sowie den Titel

import React from "react";
import { Link, Outlet, useLoaderData } aus „react-router-dom“;

const Home = () =>
  const loaderData = useLoaderData();

  zurückkehren (
    <>
      <div>Kopfzeile</div>
      <Link to="/">Home</Link>
      <Link zu="/about">Über</Link>
      <div>Home: {loaderData}</div>{"
      <Auslass />
    </>
  );
}
 
Standard-Startseite exportieren;

About.js – Dies ist eine normale Komponente, die ungefähr

import React from "react";

const About = () =>
  return <div>About</div>;
};

Standard exportieren Über;

Ich möchte, dass die Komponenten Home beim Laden oben stehen.

Answer 1

即使在 react-router-dom@6.4.0 中，使用通用 UI 渲染布局路由仍然可以正常工作。

创建一个渲染公共标头组件的布局路由组件和一个用于嵌套路由的 Outlet。

示例：

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

在配置中的布局路由上导入并渲染 Layout。

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

...

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