TIL 21 리액트 Router Nav바 숨기기

문제: 로그인하는 첫페이지에만 Nav바를 숨기고 나머지 페이지에서는 보이게구현

처음에는 라우터 컴포넌트에서 로그인을 여부를 파악해서 Nav바를 조건부 랜더링해서 해결하려고 했다.

프로젝트로 만들고 있는 사이트가 로그인 페이지에서 로그인에 성공을 하면 바로 메인페이지로 넘어가는

구조였기에 하려고 했지만 그 보다 훨씬 간단한 해결방법이 있다.

 

바로 라우터를 잘 사용하면된다!!

 

라우터 본체 파일

라우터 본체 파일에 가장 첫화면에 나오는 EnterPage컴포넌트와 그외에 Nav바가 보여질 컴포넌트들이 모여있는

User라는 컴포넌트가 들어가 있다. User컴포넌트 path를 보면 '/*' 이렇게 되어있는데 '/' 경로다음에 올 모든

path를 포함한 경로다.

 

User 컴포넌트

EnterPage를 제외한 모든 컴포넌트들이 들어가 있는데 상단에 보면 Nav바를 담고 있는 <Nav />컴포넌트가 있고

밑에 경로가 지정된 컴포넌트들이 <Routes>에 들어가있는걸 볼 수 있다. 

이렇게 라우터 파일을 분리해서 작성을 하면 조건부 랜더링같은건 하지않고 원하는 페이지에서 Nav바를

보이게 할 수 있다~~