React-Router-dom v6을 사용하여 다양한 레이아웃/요소로 구성요소 렌더링: 어떻게 이를 달성할 수 있나요?

Question

내비게이션 바와 사이드바 없이 로그인 페이지를 렌더링하는 코드를 작성하는 데 문제가 있습니다. 비슷한 질문을 묻는 몇 페이지를 보았지만 현재 상황에 맞는 페이지는 없는 것 같습니다.

반응 라우터 로그인 페이지에서 탐색 모음을 숨기는 방법 주어진 예는 훌륭하지만, 동일한 작업을 수행하는 방법이 React-router-dom v6에서 변경되었다고 생각합니다. 이로 인해 https://dev.to/iamandrewluca/private-route-in-react-로 연결됩니다. router-v6-lg5의 이러한 변경

React Router 라우팅에 대해 뭔가 이해하지 못하는 것 같습니다. 아래 코드에는 두 개의 경로가 있습니다. 탐색 표시줄 및 사이드바 구성 요소 없이 경로(로그인) 중 하나를 렌더링하고 싶습니다.

으아아아

제가 시도한 또 다른 옵션은 탐색 표시줄과 사이드바 레이블을 대시보드 구성 요소로 옮기는 것이었지만 기본적으로 새 구성 요소에 대해 동일한 복사 및 붙여넣기를 수행해야 했습니다. 이 접근 방식은 잘못되고 비효율적이라고 느껴지지만 올바른 접근 방식이라면 필요한 조치를 취하겠습니다

편집: 현재 수행하는 작업은 탐색 표시줄과 사이드바가 포함된 로그인 페이지를 로드하는 것임을 포함하는 것이 중요하다고 생각합니다. 대시보드 탐색 구성 요소에는 탐색 표시줄과 사이드바가 있지만 이는 의도적인 것입니다. 로그인 페이지에 탐색 바와 사이드바가 없기를 원합니다

Answer 1

내비게이션 바를 숨기는 가장 쉬운 방법은 로그인 페이지 구성요소로 이동하여 useLocation()을 호출하는 것입니다. 그런 다음 사용 위치를 선언한 후 다음과 같이 하면 됩니다. 변수 위치에 할당 { location.pathname === "/login" ?비어 있음: (

전체 탐색 모음 구성요소 렌더링)

내가 휴대폰으로 타이핑하는 동안 읽을 수 있다면 안 돼요

Answer 2

귀하의 질문을 이해한다면 비로그인 경로에서 탐색 및 사이드바가 렌더링되기를 원하신다는 것입니다. 이를 위해 레이아웃 구성 요소를 생성하여 해당 구성 요소와 중첩된 경로의 콘센트를 렌더링할 수 있습니다.

중첩 라우팅 사용

으아아아

경로 구성 및 useRoutes후크 사용

으아아아

...

으아아아

경로 구성 및 데이터 라우터 사용(v6.4.0에서 도입)

으아아아

...

으아아아