React 6.4.0 すべてのルーターの共通ヘッダー

Question

react-router-dom バージョン 6.4.0 を使用して React プロジェクトを開始していますが、すべてのルートに共通のヘッダーを作成できません。

App.js - これは RouterProvider

を追加したファイルです。

'./logo.svg' からロゴをインポートします;
'./App.css' をインポートします。
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";

関数 App() {
  戻る （
    <RouterProvider ルーター={ルーター}>
      <div>ヘッダ</div>
      ＜アウトレット＞
    </RouterProvider>
  );
}

デフォルトのアプリをエクスポート;

routes.js - このファイルにすべてのルートを作成します

import { createBrowserRouter, redirect } from "react-router-dom";
「../pages/About/About」から About をインポートします。
ホームを「../pages/Home/Home」からインポートします。
import { getUser, isAuthenticated } from "../sso/authUtil";

const authLoader = () => {
  if (!isAuthenticated()) {
    リダイレクトを返す("https://google.com");
  } それ以外 {
    getUser() を返します。
  }
};

エクスポート const ルーター = createBrowserRouter([
  {
    パス: "/"、
    要素: <ホーム />、
    ローダー: authLoader、
  }、
  {
    パス: "/about"、
    要素: <About />,
  }、
]);

Home.js - このファイルはホームページであり、タイトルだけでなく他のページへのリンクも含まれています

React を "react" からインポートします;
import { Link, Outlet, useLoaderData } from "react-router-dom";

const ホーム = () => {
  constloaderData = useLoaderData();

  戻る （
    <>
      <div>ヘッダ</div>
      <Link to="/">ホーム</Link>
      <リンク先="/about">概要</Link>
      <div>ホーム: {loaderData}</div>{" "}
      ＜アウトレット＞
    </>
  );
}
 
デフォルトのホームをエクスポート;

About.js - これは about

を表す通常のコンポーネントです。

React を "react" からインポートします;

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

デフォルトのエクスポートについて;

Home コンポーネントと About コンポーネントの読み込み時にタイトルが上部に表示されるようにしたいと考えています。

Answer 1

react-router-dom@6.4.0 でも、汎用 UI レンダリング レイアウトでのルーティングは引き続き正常に機能します。

パブリック ヘッダー コンポーネントとネストされたルートの Outlet をレンダリングするレイアウト ルート コンポーネントを作成します。

＃＃＃例：＃＃＃ リーリー

Layout

を構成内のレイアウト ルートにインポートしてレンダリングします。

リーリー ... リーリー