반응 경로

React는 (상대적으로) 최근 react-router-dom, V6의 새 버전을 출시했습니다. 이는 경로 사용이 완전히 변경되었음을 의미합니다. V6를 사용하여 반응 앱에서 경로 구현을 시도했다면 이 문제에 부딪혔을 것입니다.

새 V6 버전에서 경로를 사용하는 방법은 다음과 같습니다.

이전 라우팅

react router dom의 V5를 사용하여 Router 구성 요소를 포함하여 경로를 인스턴스화하고 그 안에 Switch 구성 요소를 삽입하고 다음과 같이 경로 내부에 중첩합니다.

<Router>
  <Switch>
    <Route path="/">
      <Homepage />
    </Route>
    <Route path="/about-us">
      <AboutUs />
    </Route>
  </Switch>
</Router>

V6에서는 모든 것이 변경됩니다. 제 생각에는 실제로 향상되고 직관적입니다.

이제 하위 경로를 렌더링하고 정확한 경로를 일치시키는 복잡하고 정교한 시스템이 있습니다. 하지만 여기에 대해서는 다루지 않겠습니다. 여기에서 이러한 기능을 읽고 익힐 수 있습니다.
react-router-dom-v6-docs

변경 사항은 다음과 같습니다.

<Router>
  <Routes>
    <Route index element={<Homepage />} />
    <Route path="about" element={<AboutUs />} />
  </Routes>
</Router>

첫 번째 주요 변경 사항은 홈 페이지 구성 요소가 경로 prop 대신 index라는 prop을 허용한다는 것입니다.
두 번째 변경 사항은 요소 소품 내부에 구성 요소를 전달한다는 것입니다.
세 번째 주요 변경 사항은 더 이상 "정확한"소품이 없다는 것입니다. 이는 기본적으로 모든 경로가 정확하기 때문입니다. 즉, 정확한 경로와만 일치한다는 의미입니다. 글로벌 매치를 만들기 위해 다음과 같은 별표를 사용할 수 있습니다.

<Route path="/services/*" element={<OtherServices />} />

여기서 OtherServices는 경로가 "services/any-url"과 일치할 때 렌더링되는 구성 요소입니다.

결론

V6에서 경로를 구현하는 것은 더 직관적이며 별표를 사용하여 더 많은 제어를 허용하고 더 깨끗한 코드를 만듭니다.

이 버전에 대해 어떻게 생각하세요?