React | 서브라우터

React | 서브라우터

6주간 팀 프로젝트를 진행하며 기존보다 규모가 큰 웹서비스를 개발하게 되었다. 페이지도 기존에 비해 많다. 이러한 상황에서 어떻게 효율적으로 라우터를 관리할 수 있을까?

서브라우터

서브 라우터는 라우터의 자식 컴포넌트 같은 녀석이다.

/Router.js

<BrowserRouter>
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/post" element={<PostListPage />} />
          <Route path="/post/detail/:id" element={<PostDetail />} />
          <Route path="/post/detail/createform" element={<AddPost />} />
          <Route path="/kauth" element={<KakaoAuth />} />
          <Route path="/mypage" element={<MyPage />}></Route>
          <Route path="/comment" element={<CommentList />} />
          <Route path="/comment/detail" element={<CommentDetail />} />
          <Route path="/meeting/" element={<MeetingPage />} />
     	  <Route path="/meeting/create" element={<MeetingCreatePage />} />
     	  <Route path="/meeting/detail" element={<MeetingDetailPage />} />
      	  <Route path="/meeting/detail/update" element={<MeetingUpdatePage />} />
        </Routes>
    </BrowserRouter>

앞으로 더 많은 페이지가 생성될텐데 라우터가 한눈에 안들어 오지 않을까? 개발자라면 좀 더 효율적인 관리를 지향해야한다.

위의 코드를 이렇게 다시 표현할 수 있다.

/Router.js

<BrowserRouter>
        <Routes>
          <Route path="/" element={<MainPage />} />
          <Route path="/post/*" element={<PostRouter/>} />
          <Route path="/comment/*" element={<CommentRouter />} />
          <Route path="/meeting/*" element={<MeetingRouter />} />
          <Route path="/kauth" element={<KakaoAuth />} />
          <Route path="/mypage" element={<MyPage />}></Route>=
        </Routes>
    </BrowserRouter>

/MeetingRouter.js

<Routes>
      <Route path="/" element={<MeetingPage />} />
      <Route path="/create" element={<MeetingCreatePage />} />
      <Route path="/detail" element={<MeetingDetailPage />} />
      <Route path="/detail/update" element={<MeetingUpdatePage />} />
    </Routes>

좀 더 깔끔하지 않은가?

잘 알아두도록 하자