Go_camping 팀 프로젝트 (트러블슈팅)

문제 발생

작업 중간 단계중 헤더가 불필요한 페이지가 있어 중첩 라우팅을 설정하기 위해 router.jsx파일에서 수정을 진행했다. 다음과 같은 코드로 작성했는데 정상적으로 랜더링이 되지 않는 것을 확인했다.

    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/searchresult" element={<SearchResultPage />} />
          <Route path="/detail/:contentId" element={<DetailPage />} />
          <Route path="/guide" element={<GuidePage />} />
          <Route path="/data" element={<DebugData />} />
          <Route path="guide/videolist" element={<VideoListPage />} />
        </Routes>
      </Layout>
      <Routes>
        <Route path="/main" element={<MainPage />} />
        <Route index element={<IndexPage />} />
      </Routes>
    </BrowserRouter>

​

원인 찾기 및 문제 해결

구글링을 한 결과 RRD로 실행하는 태그는 라우터와 관련없는 태그를 간섭하지 말아야 하는 게 원칙이라고 설명되어 있었다. 구글링으로 나와 있는 여러 예시를 참고하여 Route 태그 쪽 element의 요소에 layout을 적고 헤더가 필요한 페이지만 안에 넣어 랜더링이 될 수 있게 코드를 작성함 이후 브라우저로 런타임을 해보니 페이지별로 정상적으로 랜더링이 되는 것을 확인했다.

<BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="/searchresult" element={<SearchResultPage />} />
          <Route path="/detail/:contentId" element={<DetailPage />} />
          <Route path="/guide" element={<GuidePage />} />
          <Route path="/data" element={<DebugData />} />
          <Route path="guide/videolist" element={<VideoListPage />} />
        </Route>
        <Route path="/main" element={<MainPage />} />
        <Route index element={<IndexPage />} />
      </Routes>
    </BrowserRouter>
  );

(2024.09.23 TIL)