[FE] React Router v6 적응기

KoSH·2024년 1월 18일

개발 서적이나 블로그를 보다보면 <Switch /> <useHistory /> 등 더 이상 지원하지 않는 것들을 볼 수 있다.

사실 이전에 React Router 에 대해 공부할 때 접했던 내용들이지만, 볼 때마다 생각이 잘 나지 않아서 찾아보게 된다. 그럴 때마다 새로 구글링을 하는 것보다는 내 블로그에 정리해놓는 것이 좋을 것 같아 글을 쓴다!

Switch -> Routes

우선 <Switch /> 이다 !

react-router-dom 이 v5 에서 v6 로 바뀌면서 Switch 는 더 이상 지원하지 않게 되었다.

Swtich 를 사용하는 기존 코드를 먼저 살펴보자

<Router>
   <Switch>
   	<Route exact path="/">
   		<Home />
   	</Route>
   	<Route path="/register">
   		<Register />
   	</Route>
   </Switch>
</Router>

기존에는 Switch 안에 Route 를 위치시킨 후 <Route></Route> 안에 라우팅 하고자 하는 컴포넌트를 위치시켰었다.

하지만 v6 로 넘어오면서 <Routes> 를 사용하도록 변경되었다.

<Routes>
	<Route path="/" element={<Home />} />
	<Route path="/register" element={<Register />} />
</Routes>

위와같이 <Routes> 를 사용하는 방식으로 바뀌었다.

또한 <Route /> 역시 하위 컴포넌트를 사용하는 방식이 아닌, element 속성을 이용하는 방식으로 바뀌었다.

<Route path="*" element={<NotFound />}></Route>

또한 <NotFound /> 컴포넌트를 보여주기 위해서 공부하던 v5 버전 자료에서는 Switch 컴포넌트 밖에 사용하면 된다고 하였지만, <Route> 는 path='*' 이런식으로 path 속성을 와일드카드 문자로 지정 해주어야 했다.

내가 느끼기에는 v5 에서 v6 로 바뀌면서 코드를 작성하는 입장에서 조금 더 직관적으로 코드를 작성할 수 있게 된 것 같다고 느꼈다.

useHistory -> useNavigate

v6 로 바뀌면서 <useHistory /> 를 더이상 사용하지 않는다.

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

function App() {
  let history = useHistory();

  return (
    <div>
      <button onClick={() => {history.push("/main")}}>go home</button>
      <button onClick={() => {history.goBack()}}>prev page</button>
      <button onClick={() => {history.push(`/product/$parseInt(id)`)}}>detail page</button>
    </div>
  );
}

기존에는 useHistory 를 이용하여 페이지 간 이동을 구현하였다.

하지만 v6 로 업그레이드 되면서 useHistory 대신 useNavigate 를 사용한다.

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

function App() {
  let navigate = useNavigate();

  return (
    <div>
      <button onClick={() => {navigate("/main")}}>go home</button>
      <button onClick={() => {navigate(-1)}}>prev page</button>
      <button onClick={() => {navigate(`/product/$parseInt(id)`)}}>detail page</button>
    </div>
  );