[React] react-router-dom v6

https://reactrouter.com/docs/en/v6/api#useroutes

React Router | API Reference

React-router-dom이 v5에서 v6으로 업그레이드 되었다

새로운 버전을 사용하면서 기능들을 매번 찾아보기 힘드니까 공식문서와 여러 검색을 통해 정리해야겠다

사용해본 기능들 위주로 정리하고, 하나씩 추가 예정이다

(※ 참조한 문서들은 아래에 표시)

 

[설치]

$ npm install react-router-dom
# or, for a React Native app
$ npm install react-router-native

 

1. Switch 대신 Routes 사용

- 기존 Switch를 대신해 Routes를 이용하여 경로 지정

- exact가 기본 옵션으로 되어있음

- *을 이용하여 서브 경로 지정

//V5
import { BrowserRouter, Switch, Route } from "react-router-dom";

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

//V6
import { BrowserRouter, Routes, Route } from "react-router-dom";

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

 

 

2. useHistory 대신 useNavigate 사용

- useHistory를 대신하여 useNavigate를 이용하여 url 이동

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

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

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

function App02() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

 

[참조]

https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6

https://webaura.tistory.com/entry/ReactJS-react-router-dom-V6-%EB%B0%94%EB%80%90-%EB%9D%BC%EC%9A%B0%ED%8C%85

https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC

https://velog.io/@soryeongk/ReactRouterDomV6