react-route-dom 이 v6으로 업데이트 되면서 달라진점

강의를 들으며 react-route-dom 을 실습하고 있는데 에러가 너무 많이 떠서 검색하다가 v5에서 v6으로 변경이 된 다음 여러개가 바뀌었다고 한다. 아래 주소에 가보면 v6의 달라진 점을 볼 수 있다. 위 링크에서 소스코드를 가져왔는데 위가 v5, 밑이 v6로 달라진 점을 파악할 수 있다.

 

https://github.com/remix-run/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

GitHub - remix-run/react-router: Declarative routing for React

// This is a React Router v5 app

import { BrowserRouter, Switch, Route, Link, useRouteMatch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/"><Home /></Route>
        <Route path="/users"><Users /></Route>
      </Switch>
    </BrowserRouter>
  );
}

function Users() {
  // In v5, nested routes are rendered by the child component, so
  // you have <Switch> elements all over your app for nested UI.
  // You build nested routes and links using match.url and match.path.
  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}><OwnUserProfile /></Route>
        <Route path={`${match.path}/:id`}><UserProfile /></Route>
      </Switch>
    </div>
  );
}

// This is a React Router v6 app

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

달라진점

1. switch -> Routes 로 바뀌었다.
2. 더이상 exect 를 쓰지 않는다. exect path 가 그냥 path로 바뀐것을 볼 수 있다
3. history.push 대신 navigate를 쓴다.
4. Link component 가 Link as로 바뀌었다.