[React] 하위 Route 만들기

path가 길어지고 복잡해지면 하나의 Routes 안에서 다루기가 복잡해진다.

그래서 리액터 라우터안에서는 라우터를 중첩해서 사용할 수 있게 해준다.

 

이렇게 Route로 같은 path를 가지고있는 컴포넌트끼리 (route로) 감싸준다.

path프롭으로 path="qustions"을 지정해준고, 안에있는 라우터들은 qustions을 지워준다.

이때 index에 해당하는 라우트에는 index값을 지정해주면 된다.

 

<Route path="questions" element={<QuestionListPage />} />
<Route path=":questionId" element={<QuestionPage />} />

👇🏻

<Route path="questions">
  <Route index element={<QuestionListPage />} />
  <Route path=":questionId" element={<QuestionPage />} />
</Route>