React-Router-dom 6! 무엇이 바뀌었나요?

리액트 라우터가 v5에서 v6으로 업데이트되었다는 것을 깨달았을 때 저는 제 작은 프로젝트 중간에 있었습니다.

나는 모든 것을 올바르게 만들었고 내 경로는 작동하지 않았습니다. 그 때문에 너무 짜증이 나서 이전 버전으로 돌아가서 해당 프로젝트를 완료했습니다.

그 이후에 저는 그러한 변화에 대해 배우기 시작했고 모든 것이 이해되었습니다. 내 경로에 무슨 일이 일어나고 있는지 이해할 수 있습니다. 음... 그 제목으로 제 블로그를 시작하게 된 계기가 되었습니다.

스위치는 더 이상 존재하지 않습니다.

예! 이제 우리가 대신 가지고 있는 것은 경로라고 하는 이 기능이며 구문도 다릅니다.

이것은 v5 버전 사용에서 일반적이었습니다.

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from 'path-to-home';
import Cart from 'path-to-cart';

 <Switch>
    <Route exact path="/"
       <Home/>
    </Route>
    <Route path="/cart"
       <Cart/>
    </Route>
</Switch>

구성 요소를 <Rote/> 내부의 "느슨한"자식으로 전달하는 대신 이제 element라는 새 태그를 사용하여 소품으로 전달해야 합니다.
exact는 필요하지 않으며 경로의 순서는 더 이상 중요하지 않습니다.

이 새 버전은 더 똑똑합니다.
다른 구성 요소에 정의된 하위 경로가 있는 경로가 있는 경우 해당 경로에 후행 *를 사용하여 깊이 일치함을 나타냅니다. 그런 다음 React-Router-6는 더 나은 라우팅 옵션을 찾을 것입니다. 따라서 더 쉬워야 합니다.

지금부터 어떻게 사용해야 하는지 살펴보겠습니다.

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from 'path-to-home';
import Cart from 'path-to-cart';

 <Routes>
    <Route path="/" element={ <Home/> } />
    <Route path="/cart" element={ <Cart/> } /> 
</Routes>

지금은 경로 사용이 필수이므로 하나 이상의 경로가 있는 경우 <Routes/> 내에서 경로를 사용해야 합니다.

이제 <Redirect/>는 <Navegate/>라고 합니다.

또한 중첩된 경로가 있는 경우 동일한 페이지에서 정의할 수 있습니다!!

// app.jsx
import React from 'react';
import { Route, Routes, Navegate } from 'react-router-dom';
 <Routes>
    <Route path="/" element={ <Navegate _replace_ to="/welcome" /> }>
    <Route path="/welcome/*" element={ <Welcome/> } > 
       <Route path="new-user" element={ <p>Welcome, new user!</p> } />
    </Route>
    <Route path="/cart" element={ <Cart/> } /> 
</Routes>

replace의 이 <Navegate>는 선택적으로 사용할 수 있지만 페이지를 교체하는 데 사용될 때 의미론적으로 정확합니다.
사용하지 않으면 react-router-6도 페이지를 푸시합니다. 위 코드에서 또 다른 변경 사항을 발견하셨습니까?

동일한 페이지에서 선언하는 경우 아래 코드에서 볼 수 있듯이 <Outlet/>를 사용하여 중첩된 페이지에서 올바른 위치를 지정해야 합니다.

// Welcome.jsx

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Welcome () => {
 return (
   <section>
     <h1> This is you particular space</h1>
     <Outlet />
     <Link to="/home"> Return to Home <Link/>
   </section>
  );
};

고급 변경

v5 버전의 모든<Route children>이 v6에서 <Route element>로 변경되었습니다. 경로 요소를 하위 위치에서 명명된 요소 소품으로 이동하는 것처럼 간단해야 합니다.

링크 구성요소

import { NavLink } from "react-router-dom";
<NavLink activeClassName= { classes.active } to='/home' >
  Home
</NavLink>

우리는 계속해서 <Link/>와 <NavLink/> 아무것도 변경하지 않습니다. 그러나 변경된 것은 activeClassName 소품이었습니다. 존재하지 않습니다.
더 이상.

대신 가장 장황한 코드를 작성해야 합니다. 이 변경 사항을 홍보하려면 함수와 함께 인수를 사용해야 합니다. 그런 다음 react-router-6의 개체 내에서 isActive 속성을 찾고 간단한 조건부 삼항 문을 수행하여 정의합니다.

import { NavLink } from "react-router-dom";

<NavLink className= { 
(thisNav) => thisNav.isActive ? class.active : ''}
to='/home'>
  Home
</NavLink>

아직 { useHistory }를 사용한 적이 없지만 이 후크는 페이지 기록 사이를 탐색하는 데 사용됩니다.
아마도 이름이 { useNavigate } 로 변경되어 코드를 더 읽기 쉽거나 깨끗하게 만들기 때문일 수 있습니다.

이제 음수를 사용하여 사용자를 보낼 위치를 나타낼 수 있습니다. 그러나 이것은 다른 순간에 설명하겠습니다.

지금은 임시로 다음 항목을 제거했습니다.



참조:
github/react-router
react-router-v6