React 에서 중첩 라우터 사용하기

 

App.js 에서 탭바를 만들고, 해당 탭들을 라우터로 연결하였다.

<BrowserRouter>
       <Header tabMenu={tabMenu} tabMenuChange={tabMenuChange} />
       <Tab tabMenu={tabMenu} tabMenuChange={tabMenuChange} />
       <Routes>
         /* 
         생략
         */
         <Route path="/mypage/*" element={<MyPage />}></Route>
       </Routes>
</BrowserRouter>

 

위와 같은 메인 화면에서 탭을 누르면 각 라우터로 링크 이동하게 된다.

 

그런데, 마이 페이지 내에서  또 탭을 구현하여 중첩으로 라우터를 사용하려 하였더니,

앱 내에서 라우터는 한 번만 사용할 수 있다며 오류가 발생하였다.

 

나는 위 사진 처럼 마이페이지 라우터 내에서 좌측의 탭을 구현하기 위해 중첩된 라우터를 사용하고 싶었다.

 

그러기 위해서는 위 코드에서 /mypage/* 을 작성했듯이, 와일드 카드를 사용해야 한다.

 

 

와일드카드

마이 페이지 내부에서 중첩된 라우터들은 다음과 같이 작성하였다.

function MyPage() {
  return (

      <Container>
        <MyPageTab></MyPageTab>
        <Routes>
          <Route path="my_board" element={<MyBoard />}></Route>
          <Route path="my_comment" element={<MyComment />}></Route>
          <Route path="my_interested_animal" element={<MyInterestedAnimal />}></Route>
          <Route path="my_interested_board" element={<MyInterestedBoard />}></Route>
          <Route path="edit_info" element={<EditMyInfo />}></Route>
        </Routes>
      </Container>
    
  );
}

아까 와일드 카드를 사용했기 때문에, mypage/* 의 * 자리에 my_board , my_comment 등과 같은 path 가 오게 되는 것이다.

 

사용자가 /mypage/my_board 에 접속할 때 my_board 는 Route 안에 들어있는 child Route 이다.

 

 

mypage router 의 path 경로가 다음과 같았기 때문에,

<Route path="/mypage/*" element={<MyPage />}></Route>

mypage/뒤에 어떤 문자가 붙게 된다면 일단 MyPage 컴포넌트로 보내고 확인을 하게 된다.

 

현재 mypage/ 뒤에 붙은 문자는 "my_board" 이다.

 

따라서 MyPage 컴포넌트 내부에서 my_board path 를 가지고 있는 라우터를 확인하면, MyBoard 로 정상적으로 리다이렉트한다.

<Route path="my_board" element={<MyBoard />}></Route>