React Router v6 - 새로운 기능은 무엇입니까?

안녕 얘들아

그래서 최근에 React Router V6가 출시되었으며 새롭고 흥미로운 기능이 많이 있습니다. 이러한 새로운 업그레이드 중 일부를 살펴보겠습니다.

Complete Article

굿바이 스위치!

이전에는 React Router V6에서 <Switch> 구성 요소를 사용하여 모든 경로를 래핑했으며 이제 Switch 구성 요소가 <Routes>로 대체되었습니다. 기본적으로 스위치와 동일하지만 몇 가지 새로운 기능이 <Route> 구성 요소 자체에 추가되었습니다.

Route 구성 요소에 대한 변경 사항

<Route> 구성 요소에 몇 가지 유용한 업그레이드가 있었습니다.

1 - 정확할 필요가 없습니다.

V5에서는 특정 경로로 이동하도록 구성 요소에 exact 소품을 배치해야 했습니다. 그러나 V6에서는 React Router가 이제 알려주지 않고 항상 정확한 경로를 찾기 때문에 이 prop이 필요하지 않습니다.

2 - 요소 소품 소개

이전에는 Route의 구성 요소를 자식으로 전달했습니다. 즉, 구성 요소가 Route 내에 배치되었습니다. V6에서는 단순히 경로에 element prop을 전달하고 그 안에 구성 요소를 배치할 수 있으므로 더 이상 필요하지 않습니다. 이것의 장점은 각 경로 구성 요소에 배치하는 대신 경로에 따라 필요한 구성 요소를 간단히 주입할 수 있다는 것입니다.

V5 대 V6 코드 예:

위에서 언급한 업그레이드는 아래 비교에서 설명됩니다.

React Router V5 코드:

export default function App() {
  return (
    <div>
      <Switch>
        <Route path="/page1">
          <Page1/>
        </Route>
        <Route exact path="/page2">
          <Page2/>
        </Route>
      </Switch>
    </div>
  )
}

React Router V6 코드:

export default function App() {
  return (
    <div>
      <Routes>
        <Route path="/page1" element={<Page1/>} />
        <Route path="/page2" element={<Page2/>} />
      </Routes>
    </div>
  )
}

보시다시피 위의 코드 비교에서 Routes 대신 Switch 사용, exact 제거 및 요소 prop 사용의 세 가지 변경 사항을 확인할 수 있습니다.

다음은 라우팅 관련 업그레이드 중 일부입니다. myhupbages article 에서 자세히 다루는 더 많은 새로운 기능과 변경 사항이 있습니다.

Complete Article

읽어 주셔서 감사합니다!. react router v6의 변경 사항에 대한 새로운 정보를 찾으셨기를 바랍니다.
게시물이 마음에 드셨다면 커피를 사주셔도 됩니다!

또한 내 hubpages articles을 확인하십시오.
건배:)