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
구성 요소가 로드될 때 제목이 표시되도록 하고 싶습니다.
react-router-dom@6.4.0
에서도 일반 UI 렌더 레이아웃을 사용한 라우팅은 여전히 잘 작동합니다.공통 헤더 구성 요소와 중첩 경로용 헤더 구성 요소를 렌더링하는 레이아웃 경로 구성 요소를 만듭니다
Outlet
.예:
으아악구성의 레이아웃 경로에서 가져오고 렌더링됩니다
으아악Layout
....
으아악