React Router V5 대 V6

React Router 버전 6이 최근에 출시되었으며 가장 널리 사용되는 반응 라이브러리 중 하나이므로 변경 사항을 이해하는 것이 중요합니다.

그렇다면 React Router는 무엇입니까?

React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.

V6에서는 향상된 경로 패턴 일치 알고리즘 또는 새로운 구성 요소 추가 등 내부적으로 많은 변경이 있었습니다. 뿐만 아니라 번들 크기가 거의 58% 감소했습니다.



다음은 기존 프로젝트를 React Router v5에서 v6으로 업그레이드하기 위해 수행할 수 있는 몇 가지 변경 사항입니다.

경로로 대체된 스위치

v6에서는 Switch가 react-router-dom에서 내보내지지 않습니다. 이전 버전에서는 Switch를 사용하여 경로를 래핑할 수 있었습니다. 이제 Routes 대신 Switch를 사용하여 동일한 작업을 수행합니다.

경로를 정의하는 방식의 변화

일치하는 경로에서 렌더링되어야 하는 구성 요소는 Route 구성 요소의 자식으로 작성할 수 없지만 렌더링할 JSX 구성 요소를 전달해야 하는 element라는 prop을 사용합니다.

더 이상 정확한 소품이 필요하지 않습니다

버전 6에서는 React Router가 훨씬 더 훌륭해졌습니다. 이제 더 나은 경로 일치 알고리즘을 사용하면 exact prop 없이 특정 경로 일치를 일치시킬 수 있습니다. 이전에는 exact 없이 일치 프로세스가 경로 정의의 위에서 아래로 수행되었으므로 관련 키워드로 시작하는 모든 URL이 로드됩니다. 그러나 이제 우리는 그것에 대해 걱정할 필요가 없습니다. React Router는 특정 URL에 대한 최상의 경로를 로드하는 더 나은 알고리즘을 가지고 있기 때문에 정의 순서는 이제 실제로 중요하지 않습니다.

따라서 이 세 가지 사항을 요약하기 위해 이 코드 스니펫을 고려할 수 있습니다.

v5에서

import { Switch, Route } from "react-router-dom";
.
.
.
<Switch>
    <Route path="/">
        <Home/>
    </Route>
    <Route exact path="/cryptocurrencies">
        <Cryptocurrencies/>
    </Route>
    <Route exact path="/crypto/:coinId">
        <CryptoDetails/>
    </Route>
    <Route exact path="/exchanges">
        <Exchanges />
    </Route>
</Switch>

v6에서

import { Routes, Route } from "react-router-dom";
.
.
.
<Routes>
   <Route path="/" element={<Home />} />
   <Route path="/crypto/:coinId" element={<CryptoDetails />} />
   <Route path="/cryptocurrencies" element={<Cryptocurrencies />} />

   <Route path="/exchanges" element={<Exchanges />} />
</Routes>

react-router-config를 별도로 설치할 필요가 없습니다.

react-router-config를 사용하면 경로를 React 요소 대신 javascript 개체로 정의할 수 있으며 모든 기능이 핵심 반응 라우터 v6에서 이동해야 합니다.

//V5
import { renderRoutes } from "react-router-config";

const routes = [
  {
    path: "/",
    exact: true,
    component: Home
  },
  {
    path: "/cryptocurrencies",
    exact: true,
    component: Cryptocurrencies
  },
  {
    path: "/exchanges",
    exact: true,
    component: Exchanges
  }
];

export default function App() {
   return (
     <div>
       <Router>{renderRoutes(routes)}</Router>
     </div>
   );
}




//V6
function App() {
  let element = useRoutes([
    // These are the same as the props you provide to <Route>
    { path: "/", element: <Home /> },
    { path: "/cryptocurrencies", element: <Cryptocurrencies />,
      // Nested routes use a children property
      children: [
        { path: ":coinId", element: <CryptoDetails /> },
      ] 
    },
    {
      path: "/exchanges",
      element: <Exchanges />
    },
  ]);

  // The returned element will render the entire element
  // hierarchy with all the appropriate context it needs
  return element;
}

useHistory는 이제 useNavigate입니다.

React Router v6에는 이제 탐색 API가 있으며 대부분의 경우 useHistory를 useNavigate로 바꾸는 것을 의미합니다.

//V5
import { useHistory } from "react-router-dom";

function News() {
  let history = useHistory();
  function handleClick() {
    history.push("/home");
  }
  return (
    <div>
      <button onClick={()=>{
           history.push("/home");
      }}>Home</button>
    </div>
  );
}


//V6
import { useNavigate } from "react-router-dom";

function News() {
  let navigate = useNavigate();

  return (
    <div>
      <button onClick={()=>{
          navigate("/home");
      }}>go home</button>
    </div>
  );
}

useHistory 의 좀 더 일반적인 기능은 go , goBack 및 goForward 입니다. 탐색 API로도 이러한 작업을 수행할 수 있습니다. 앞으로 또는 뒤로 이동하려는 단계 수를 언급하기만 하면 됩니다(앞으로 '+', 뒤로 '-'). 그래서 우리는 이것을 고려할 수 있는 이러한 기능을 코딩할 수 있습니다.

//V5
import { useHistory } from "react-router-dom";

function Exchanges() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        2 steps back
      </button>
      <button onClick={goBack}>1 step back</button>
      <button onClick={goForward}>1 step forward</button>
      <button onClick={() => go(2)}>
        2 steps forward
      </button>
    </>
  );
}


//V6
import { useNavigate } from "react-router-dom";

function Exchanges() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        2 steps back
      </button>
      <button onClick={() => navigate(-1)}>1 step back</button>
      <button onClick={() => navigate(1)}>
        1 step forward
      </button>
      <button onClick={() => navigate(2)}>
        2 steps forward
      </button>
    </>
  );
}

<NavLink />에서 제거된 activeStyle 및 activeClassName 소품

이전 버전에서는 <NavLink/>가 활성화되는 시간에 대해 별도의 클래스 또는 스타일 개체를 설정할 수 있었습니다. V6에서는 Nav Links className 및 style props의 경우 대신 이 두 개의 props가 제거되어 조금 다르게 작동합니다. 스타일을 더 잘 제어할 수 있도록 링크에 대한 일부 정보를 포기하는 함수를 사용합니다.

//V5
<NavLink
  to="/news"
  style={{ color: 'black' }}
  activeStyle={{ color: 'blue' }}>
  Exchanges
</NavLink>

<NavLink
  to="/news"
  className="nav-link"
  activeClassName="active">
  Exchanges
</NavLink>

//V6
<NavLink
  to="/news"
  style={({isActive}) => { color: isActive ? 'blue' : 'black' }}>
  Exchanges
</NavLink>

<NavLink
  to="/news"
  className={({ isActive }) => "nav-link" + (isActive ? "active" : "")}>
  Exchanges
</NavLink>

리디렉션을 탐색으로 바꾸기

Redirect는 더 이상 react-router-dom에서 내보낼 수 없으며 대신 동일한 기능을 얻기 위해 can Navigate을 사용합니다.

//V5
import { Redirect } from "react-router-dom";

<Route exact path="/latest-news">
    <Redirect to="/news">
</Route>
<Route exact path="/news">
    <News />
</Route>


//V6
import { Navigate } from "react-router-dom";

<Route path="/latest-news" element={<Navigate replace to="/news">} />
<Route path="/news" element={<Home />} />

replace 의 element 내부에 전달된 Route 소품에 유의하십시오. 이는 현재 탐색 스택을 교체하고 있음을 나타냅니다. replace가 없으면 기존 탐색 스택에서 구성 요소를 푸시하는 것뿐입니다.

오늘은 여기까지입니다. 이것이 여러분의 반응 프로젝트를 React Router V6로 업그레이드하는 데 도움이 되기를 바랍니다.

읽어 주셔서 감사합니다 !! 😇😇
행복한 코딩!! 해피빌딩!!