[React] Routes, Route 정리 & Outlet

 

 

💡 Route 를 그룹별로 묶어보자.

 

courses 패스들을 정리해보자.

<App>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="courses" element={<CourseListPage />} />  <!--얘네-->
    <Route
      path="courses/react-frontend-development"
      element={<CoursePage />}  <!--얘네-->
    />
    <Route path="questions" element={<QuestionListPage />} />
    <Route path="questions/616825" element={<QuestionPage />} />
    <Route path="wishlist" element={<WishlistPage />} />
  </Routes>
</App>

<Route path="courses">  <!-- 묶은 애한테 courses -->
  <Route index element={<CourseListPage />} />  <!-- 원래 courses 였던 애는 index 작성 -->
  <Route path="react-frontend-development" element={<CoursePage />} />  <!-- courses 빼고 주소 작성-->
</Route>

 

Route 태그를 하나 더 만들어서 묶어줬다.

이제 courses 만 바꾸면 하위 주소도 알아서 바뀐다!

 

✳️ Route 로 감싸면서 특정 path 안에서 공통된 디자인을 보여주고 싶다면?

Main.jsx

<App>
  <Routes>
    <Route path="/">  <!-- 라우트로 한번더 감싸줬다 -->
      <Route index element={<HomePage />} />  <!-- 원래 / 였던 이곳에 index 줬다 -->
      <Route path="courses">
        <Route index element={<CourseListPage />} />
        <Route
          path="react-frontend-development"
          element={<CoursePage />}
        />
      </Route>
      <Route path="questions" element={<QuestionListPage />} />
      <Route path="questions/616825" element={<QuestionPage />} />
      <Route path="wishlist" element={<WishlistPage />} />
    </Route>
  </Routes>
</App>

 

App.jsx 를 살펴보면, children 을 가져와 공통 레이아웃을 렌더링하고 있다.

function App({ children }) {
  return (
    <>
      <Nav className={styles.nav} />
      <div className={styles.body}>{children}</div>
      <Footer className={styles.footer} />
    </>
  );
}

 

App 컴포넌트를 path="/" 안쪽에 둔다면 어떻게 될까?

Main.jsx

Routes 안에는 Route 나 React.Fragment 만 올 수 있다는 이야기..

 

🥹 이럴 때 Outlet 을 활용해야 한다!

Main.jsx

<Routes>
  <Route path="/" element={<App />}>  <!-- 감싸던 App 을 지우고 여기 엘리먼트 프롭으로 내려줬다 -->
    <Route index element={<HomePage />} />
    <Route path="courses">
      <Route index element={<CourseListPage />} />
      <Route path="react-frontend-development" element={<CoursePage />} />
    </Route>
    <Route path="questions" element={<QuestionListPage />} />
    <Route path="questions/616825" element={<QuestionPage />} />
    <Route path="wishlist" element={<WishlistPage />} />
  </Route>
</Routes>

 

App.jsx

import { Outlet } from 'react-router-dom';

function App() {  <!-- 받아오던 children 제거 -->
  return (
    <>
      <Nav className={styles.nav} />
      <div className={styles.body}>
        <Outlet />  <!-- children 을 지우고 Outlet 을 넣어줬다 -->
      </div>
      <Footer className={styles.footer} />
    </>
  );
}

 

이러면 Route 안에서 렌더링 되는 부분은 Outlet 컴포넌트에서 렌더링 된다.

마치 children 같은 느낌!

 

 

Main.jsx questhions 도 정리해주자.

<Route path="questions">  <!-- courses 처럼 정리했다 -->
  <Route index element={<QuestionListPage />} />
  <Route path="616825" element={<QuestionPage />} />
</Route>