<p><code>react-router-dom</code> バージョン 6.4.0 を使用して React プロジェクトを開始していますが、すべてのルートに共通のヘッダーを作成できません。 </p> <p>App.js - これは <code>RouterProvider</code></p> を追加したファイルです。 <pre class="brush:php;toolbar:false;">'./logo.svg' からロゴをインポートします; './App.css' をインポートします。 import { Link, Outlet, RouterProvider } from "react-router-dom"; import { routers } from "./routes/routes"; 関数 App() { 戻る （ <RouterProvider ルーター={ルーター}> <div>ヘッダ</div> ＜アウトレット＞ </RouterProvider> ); } デフォルトのアプリをエクスポート;</pre> <p>routes.js - このファイルにすべてのルートを作成します</p> <pre class="brush:php;toolbar:false;">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 />, }、 ]);</pre> <p>Home.js - このファイルはホームページであり、タイトルだけでなく他のページへのリンクも含まれています</p> <pre class="brush:php;toolbar:false;">React を "react" からインポートします; import { Link, Outlet, useLoaderData } from "react-router-dom"; const ホーム = () => { constloaderData = useLoaderData(); 戻る （ <> <div>ヘッダ</div> <Link to="/">ホーム</Link> <リンク先="/about">概要</Link> <div>ホーム: {loaderData}</div>{" "} ＜アウトレット＞ </> ); } デフォルトのホームをエクスポート;</pre> <p>About.js - これは about</p> を表す通常のコンポーネントです。 <pre class="brush:php;toolbar:false;">React を "react" からインポートします; const About = () => { return <div>About</div>; }; デフォルトのエクスポートについて;</pre> <p><code>Home</code> コンポーネントと <code>About</code> コンポーネントの読み込み時にタイトルが上部に表示されるようにしたいと考えています。 </p>