React Router V6: 몇 가지 새로운 변경 사항

얼마 전 React Router 라이브러리가 버전 6으로 업데이트되었고 그와 함께 몇 가지 흥미로운 변경 사항이 포함되었습니다.

버전을 5에서 6으로 업그레이드하려면 이 링크Upgrading React Router V5 to V6를 참조하십시오.

먼저 React Router란?

React Router는 React.js의 라우팅을 위한 패키지입니다. 웹, node.js가 있는 서버, React Native에서."

기본 사항을 알았으니 이제 몇 가지 새로운 변경 사항에 대해 이야기해 보겠습니다.

스위치 구성 요소를 경로로 교체

React Router를 사용해 본 적이 있다면 일치하는 모든 경로 대신 이러한 경로 중 하나만 동시에 로드되도록 하는 이 Switch 구성 요소로 경로를 래핑해야 한다는 것을 알고 있습니다. 이 같은

export function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route exact path="/profile">
          <ProfilePage />
        </Route>
        <Route path="/profile/:id">
          <ProfileUserPage />
        </Route>
      </Switch>
    </div>
  )
}

이제 V6에서는 이름을 Switch에서 Routes로 변경했으며 이제 Routes 구성 요소에는 element라는 새로운 prop이 있습니다. 여기서 이 구성 요소 내에서 렌더링하는 데 필요한 구성 요소를 전달하면 다음과 같습니다.

export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route exact path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

내부 변경 및 경로 평가(더 이상 정확한 소품이 필요하지 않음)

따라서 이 새 버전에서는 일부 내부 변경이 이루어졌으며 React Router가 이러한 경로에 대해 수행한 다음 로드할 경로를 선택하는 평가가 변경되었습니다. V5의 경우 아래 프로필 경로에서와 같이 원하는 특정 경로로 이동하기 위해 구성 요소에 정확한 소품을 배치해야 했습니다.

export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route exact path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

정확한 prop을 넣지 않으면 우리가 통과하는 경로로 시작하는 경로를 렌더링할 것이고 그것은 우리가 원하는 것이 아닙니다. 이제 V6에서는 React Router가 항상 우리가 통과하는 정확한 경로를 찾을 것이기 때문에 이 prop이 더 이상 필요하지 않습니다. 이렇다

export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

이제 V6에 있는 Link 구성 요소에 대해 이야기해 보겠습니다.

NavLink activeClassName 소품이 더 이상 존재하지 않습니다.

해당 소품을 사용하면 다음과 같이 활성화되었음을 표시하기 위해 일부 CSS로 수정할 특정 링크에 대한 클래스를 전달할 수 있습니다.

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink activeClassName="active" to="/about" />
        </li>
        <li>
          <NavLink activeClassName="active" to="/profile" />
        </li>
      </ul>
    </header>
  )
}

V6에서는 이를 수동으로 수행해야 하며 다음과 같이 React에 있는 className 소품에 함수를 전달하면 됩니다.

export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}

React Router는 navData 인수를 제공하며 객체이며 내부에는 해당 순간에 경로가 활성화된 경우 true가 되는 isActive 속성이 있습니다.

useParams 후크

V5의 이 후크는 V6에서 변경되지 않았으며 일치시키려는 특정 URL과 일치하도록 매개변수를 전달하여 동일한 방식으로 계속 사용할 수 있습니다.

이것이 React Router의 변경 사항 중 일부입니다. 이러한 변경 사항을 더 보고 싶다면 Academind가 이에 대해 이야기하는 비디오를 보거나 문서Here를 읽어보십시오. 다음에 뵙겠습니다, 감사합니다!