TIL40.특정 route에만 component 적용하기

조연정·2020년 10월 31일
1
post-thumbnail

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화면으로 가게 해주었다.

profile
Lv.1🌷

0개의 댓글