React 6.4.0 모든 라우터의 공통 헤더

Question

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

App.js - 이것은 제가 RouterProvider

를 추가한 파일입니다.

'./logo.svg'에서 로고 가져오기;
import './App.css';
"react-router-dom"에서 import { Link, Outlet, RouterProvider };
"./routes/routes"에서 { 라우터 } 가져오기;;

함수 앱() {
  반품 (
    <RouterProvider 라우터={라우터}>
      <div>헤더</div>
      <아울렛/>
    </라우터 제공자>
  );
}

기본 앱 내보내기;

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();

  반품 (
    <>
      <div>헤더</div>
      <링크="/">홈</Link>
      <링크="/about">정보</Link>
      <div>홈: {loaderData}</div>{"}
      <아울렛/>
    </>
  );
}
 
기본 홈 내보내기;

About.js - 이는

정보를 나타내는 일반 구성요소입니다.

"react"에서 React 가져오기;;

const 정보 = () =>
  return <div>정보</div>
};

기본 정보 내보내기

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

Answer 1

react-router-dom@6.4.0에서도 일반 UI 렌더 레이아웃을 사용한 라우팅은 여전히 ​​잘 작동합니다.

공통 헤더 구성 요소와 중첩 경로용 헤더 구성 요소를 렌더링하는 레이아웃 경로 구성 요소를 만듭니다 Outlet.

예:

으아악

구성의 레이아웃 경로에서 가져오고 렌더링됩니다 Layout.

으아악

...

으아악