react-router-dom 버전 6.4.0을 사용하여 React 프로젝트를 시작하고 있지만 모든 경로에 대한 공통 헤더를 만들 수 없습니다.

App.js - 이것은 제가 RouterProvider

'./logo.svg'에서 로고 가져오기; import './App.css'; "react-router-dom"에서 import { Link, Outlet, RouterProvider }; "./routes/routes"에서 { 라우터 } 가져오기;; 함수 앱() { 반품 (  
헤더
 <아울렛/>  ); } 기본 앱 내보내기;

routes.js - 이 파일에서 모든 경로를 생성합니다

import { createBrowserRouter, Redirect } from "react-router-dom" "../pages/About/About"에서 정보를 가져옵니다. "../pages/Home/Home"에서 홈을 가져옵니다. "../sso/authUtil"에서 import { getUser, isAuthenticated }를;; const authLoader = () => if (!isAuthenticated()) { return 리디렉션("https://google.com"); } 또 다른 { getUser()를 반환합니다. } }; const 라우터 내보내기 = createBrowserRouter([ { 경로: "/", 요소: <홈 />, 로더: authLoader, }, { 경로: "/about", 요소: <정보 />, }, ]);

Home.js - 이 파일은 홈 페이지이며 제목과 다른 페이지에 대한 링크를 포함하고 있습니다

"react"에서 React 가져오기;; "react-router-dom"에서 import { Link, Outlet, useLoaderData }; const 홈 = () => const loaderData = useLoaderData(); 반품 ( <> 
헤더
 <링크="/">홈 <링크="/about">정보 
홈: {loaderData}
{"} <아울렛/>  ); } 기본 홈 내보내기;

About.js - 이는

"react"에서 React 가져오기;; const 정보 = () => return 
정보
 }; 기본 정보 내보내기

Home 및 About 구성 요소가 로드될 때 제목이 표시되도록 하고 싶습니다.