nav는 대부분의 페이지에 들어가지만, 특정페이지에는 필요하지 않다. route에 이 부분을 어떻게 반영할 수 있는지 알아보자.
대부분 페이지에 nav component가 필요했지만 로그인, 회원가입페이지같은 경우에는 필요없었다. 필요한 컴포넌트에만 nav를 넣어주는 방법도 있겠지만, 다른 방법도 알게되서 정리해보기로 했다.
return (
<Router>
<Switch>
<Route exact path="/Login" component={Login} />
<Route exact path="/SignUp" component={SignUp} />
<Route
exact
path="*"
component={() => (
<>
<Navbar />
<Route exact path="/" component={Main} />
<Route exact path="/Wallpaper" component={Wallpaper} />
<Route exact path="/WorksList" component={WorksList} />
<Footer />
</>
)}
/>
</Switch>
</Router>
);
Login, Signup 컴포넌트에는 nav가 들어가지않게 nav컴포넌트 위에 위치해주었다.
path가 "/"이면 Navbar와 함께 메인화면으로 가고, path가 "/Wallpaper" 이면 navbar와 함께 wallpaper화면으로 가게 해주었다.