라우터 v6

npm install

npm install react-router-dom@6

를 터미널에 설치한다.

그리고 기존에 Switch문은 Routers로 대체되었다.

• App.js

    <Switch>
          <Route path='/welcome'>
            <Welcome />
          </Route>
          <Route path='/products' exact>
            <Products />
          </Route>
          <Route path='/products/:productId'>
            <ProductDetail />
          </Route>
    </Switch>

->

     <Routes>
          <Route path="/welcome" element={<Welcome />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:productId" element={<ProductDetail />} />
     </Routes>

버전 6에서는 exact도 필요가 없고, element로 JSX로 연결시켜줍니다!

그리고 v5에서는 동적 path가 있으면 순서가 Route의 순서가 중요했지만, v6에서는 순서가 더이상 필요없습니다!

그리고 activeClassName을 통해 활성화를 시킨 것이 이제 필요가 없어졌고, className을 이용해 활성화 상태를 확인할 수 있습니다.

• MainHeader.js

<li>
     <NavLink activeClassName={classes.active} to='/welcome'>
              Welcome
    </NavLink>
</li>

->

 <li>
     <NavLink
        className={(navData) => (navData.isActive ? classes.ACTIVE : "")}
              to="/welcome"
            >
              Welcome
      </NavLink>
 </li>

다음으로 ProductDetail 구성요소에 대해서 간단히 살펴보겠습니다.

• ProductDetail.js

import { useParams } from 'react-router-dom';

v5에서 useParams 동적 파라미터를 추출했었는데 이것은 v6에서도 변함없습니다.

---

다음 예시를 들어보겠습니다.

• App.js

   <Route path="/" exact>
            <Redirect to="/welcome" />
   </Route>

이제 Redirect는 v6에서 쓰지 않습니다.

<Route path='/' element={<Navigate replace to='/welcome' />} />

대신 Navigate를 사용합니다! replace prop을 사용해야 리다이렉트 사용해야합니다.

그리고 중첩라우팅도 v5와 v6에서 사용 법이 다릅니다.

-APp.js

<Route path="/welcome/*" element={<Welcome />}>

• Welcoms.js

 <section>
      <h1>The Welcome Page</h1>
      <Routes>
        <Route path="new-user" element={<p>Welcome, new user!</p>} />
      </Routes>
    </section>

기존에 Route path="welcome/new-user"
를 적어줘야했지만 이제 v6에서는 welcome을 뺴고 new-user만 적어주면 됩니다! 앞 서 마찬가지로 element props를 이용해 추가하고자하는 JSX를 설정해주면 됩니다!

Link to='welcome/new-user'>

->

Link to='new-user'>

Link역시 마찬가지로 기존 path에서 welcome을 빼고 적어주면 됩니다! 이미 라우팅을 통해 로드된 구성요소안에 링크이기 떄문에 입니다!

중첩 라우팅을 다르게 정의하는 방법도 있습니다.

• Welcome.js에서

Route를 없애고 App.js에서 한꺼번에 적용하는 방법입니다!

• App.js

<Route path="/welcome/*" element={<Welcome />}>
     <Route path="new-user" element={<p>Welcome, new user!</p>}></Route>
 </Route>

이렇게 App.js에서 하게되면 한꺼번에 Route를 볼 수 있어서 가독성에 좋습니다.
하지만

<Route path="new-user" element={<p>Welcome, new user!</p>}></Route> 

이 element에 있는 Welcome, new user라는 문구가
Welcome.js 어느 부분에 위치해야할 지 정해주려면

• Welcome.js

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

Outlet을 import하고

<Link to="new-user">New User</Link>
 <Outlet />

원하는 위치에 Outlet을 넣어주면 됩니다!

---

특정 작업이 완료된 직후나 버튼이 눌렸을 때 HTTP 요청이 보내졌을 떄 등 탐색을 하고 싶은 경우 v5에서 useHistory Hook을 썻습니다!

하지만 v6에서는 useNavigate를 사용합니다!

• Product.js

import { Link, useNavigate } from "react-router-dom";

  const navigate = useNavigate();
  navigate("/welcome", {replace: true});

replace: true로 바꿔주면
현재의 라우팅을 새로운 거승로 대체해 줍니다. 탐색 스택으로 새 라우팅을 푸시하는 대신 리다이렉트 합니다.

주소를 적지않고 숫자를 적을 수도 있는데

navigate(-1); 

-1은 이전페이지 -2는 이전 페이지보다 전의 펲이지로 가는 겁니다. 1은 다시 앞으로 가는 겁니다.

---

마지막으로 Prompt 구성요소에 대해 말해보겠습니다.

Prompt에서 페이지를 실수로 나가는 경우를
막기 위해 when 구성요소를 사용하는데 이 구성 요소가 없어졌습니다.