[React] React Router Dom v6 달라진 점

기존 React-Router-Dom v5 버전에서 v6 버전으로 업데이트가 되었습니다. Next.js를 많이 사용하다보니 업데이트된지도 몰랐네요. 우선 리액트 라우터를 설치하기 전 v6 버전의 경우 리액트 16.8 이상 버전에서 사용해야 한다는 점 말씀드립니다.

1. Install

> npm i react-router-dom

2. BrowserRouter

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter basename='/'>
      <React.StrictMode>
        <App />
      </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

리액트 라우터를 사용하기 전 index.js 파일에 있는 <App/> 컴포넌트를 <BrowserRouter/> 컴포넌트로 감싸줍니다. (withRouter라는 다른 종류의 라우터도 있습니다.)

3. <Switch /> 대신 <Routes /> 사용하기

<Switch/> 컴포넌트 네이밍이 <Routes/>로 변경되었습니다. 안에 사용하던 <Route/>의 이름은 그대로이지만, 속성의 변화가 생겼습니다.

4. <Route /> 속성 변화

React-Router-Dom v5

import { Switch, Route } from 'react-router-dom'


<Switch>
	<Route exact path='/' component={() => <Index />} />
    	...
</Switch>

기존 <Route/> 컴포넌트는 path에 맞게 component 속성에 Arrow Function으로 전달한 컴포넌트를 화면에 표시해주는데요. 필요에 따라서 exact 속성을 줘 동일한 경로에만 컴포넌트를 연결시킬 수 있었습니다.

React-Router-Dom v6

import { Routes, Route } from 'react-router-dom'
import Page1 from '../pages/Page1'
import Page2 from '../pages/Page2'

<Routes>
	<Route path='/page1' element={<Page1 />} />
    <Route path='/page/*' element={<Page2 />} />
    	...
</Routes>

exact 속성은 사라졌고 복수의 컴포넌트를 라우팅 시키고 싶을 경우 path 속성에서 * 문자열을 넣어 사용합니다. 컴포넌트를 지정해 줄 때에는 component 대신에 element 속성을 사용합니다.

5. useHistory() 대신 useNavitate() 사용하기

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

const Comp = () => {

  const history = useHistory();  
  const movePage = () => history.push("/home")
  
  return (
    <div>
      <button onClick={movePage}>Go</button>
    </div>
  );
}

이전 useHistory를 사용했던 방식입니다. 이제는 useHistory 대신 useNavigate를 사용하려면 아래와 같이 사용합니다.

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

const Comp = () => {

  const navigate = useNavigate();  
  const movePage = () => navigate("/home")
  
  return (
    <div>
      <button onClick={movePage}>Go</button>
    </div>
  );
}

push는 이렇게 사용하면 되지만 replace와 뒤로가기의 경우 아래처럼 사용합니다.

  const movePage = () => navigate("/home", { replace : true }); //replace
  const backPage = () => navigate(-1); //back

에러 페이지 라우팅

import { Navigate } from 'react-router-dom'


<Routes>
    <Route path="/*" element={<Main/>} />
    <Route path="/page1" element={<Page1/>} />
    <Route path="/page2" element={<Page2/>} />
    <Route path="/page3" element={<Page3/>} />
    <Route path='*' element={<Navigate replace to='/error' />}     
    <Route path="/error" element={<Error/>} /> 
</Routes>

/error' 경로에 에러 페이지를 따로 만들어 놨습니다. 그리고 존재하지 않는 경로로 들어올 경우 에러 페이지로 리플레이스 시켜줬습니다.

Navigate를 선언해주고 replace 속성과 경로인 to 속성에 '/error'를 넣어줍니다.

저작자표시 비영리 변경금지

꾸생의 DevLog