[React] react-router-dom v6 변경사항 살펴 보기

1. <Switch> → <Routes>

  - Wrapper 명칭이 <Route>의 element들을 포함하는 <Routes>로 변경되었다.

  - exact 옵션이 삭제되어 exact가 default로 적용된다.

    → `exact`옵션을 없애고 싶다면 path 끝에 *을 붙여준다. (예시로 확인)

  - path에 하위경로(":id")와 상대경로(".", ".." )로의 지정이 가능하다.

 

 

2. 중첩 라우팅의 간편화

// 기존 v5의 중첩 라우팅
import { BrowserRouter, Switch, Route, Link, useRouteMatch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/login" component={Login} />
      </Switch>
    </BrowserRouter>
  );
}

function Login() {
  const { path } = useRouteMatch();
  return (
    <div>
      <Switch>
        <Route path={`${path}/signup`}>
          <SignUp />
        </Route>
      </Switch>
    </div>
  );
}

 

// 변경된 v6의 중첩 라우팅
import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='login' element={<Login />} >
          <Route path='signup' element={<SignUp />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Login() {
  return (
    <>
      <Outlet />
    </>
  )
}

- page 단에서 모든 경로를 중첩하고, 중첩되는 randering elements는 <Outlet> component를 사용하여 이중작업을 방지한다.

- 최상단의 <Routes> 내에서 모든 라우팅 구조를 중첩할 수 있기 때문에 매우 직관적이다는 장점이 있다.

 

 

3. useHistory → useNavigate

 - useHistory Hooks가 useNavigate로 대체되었다.

 

4. useRoutes

기존의 react-router-config가 useRoutes Hooks로 대체되어 패키지 설치가 불필요해졌다.

 

 

<라우팅 예시>

// v5
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Main from "./page/Main";
import Login from "./page/Login";
import SignUp from "./page/SignUp";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={() => <Main />} />
        <Route exact path="/login" component={() => <Login />} />
        <Route exact path="/signup" component={() => <SignUp />} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

// v6로 변경된 후
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Main, Login, SignUp } from "../pages";
import { Navigation } from "../component";

const Router = () => {
  return (
    <BrowserRouter>
      <Navigation />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login/*" element={<Login />} />
        <Route path="/signup/*" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

React Router 공식문서 https://reactrouter.com/docs/en/v6/upgrading/v5