[react] react-router-dom 버전6으로 업데이트

react-router-dom가 버전6으로 업데이트 되면서 변화가 많아졌다.

 

참고자료

https://reactrouter.com/docs/en/v6/getting-started/overview

React Router | Overview

---

 

나에게 영향이 있는 부분만 정리했다.

 

1) <Switch></Switch> 가 <Routes></Routes>로 변경되었다. 

그리고 component는 방식도 {Main}에서 {<Main/>} 으로 변경되었다.

 

변경전 코드

         <BrowserRouter>
                <Switch>
                    <Route path={'/'} component={Main}/>
                    <Route path={'/study'} component={Study}/>
                </Switch>
         </BrowserRouter>

변경후 코드

               <BrowserRouter>
                <Routes>
                    <Route path={'/'} element={<Main/>}/>
                    <Route path="/study" element={<Study/>} />
                </Routes>
            </BrowserRouter>

 

2) useHistory를 사용했는데 useNavigate으로 변경되었다.

변경전

import React from 'react';
import {Button} from "antd";
import {useHistory} from "react-router-dom";

const Main = () => {
    const history = useHistory();
    return (
        <>
        <div>
            <Button onClick={() => {
                history.push("/menu")
            }}>메뉴판</Button>
            <Button onClick={() => {
                history.push("/study")
            }}>공부하기</Button>
        </div>
  </>
    );
}

export default Main;

변경후

import React from 'react';
import {Button, message} from "antd";
import {useNavigate} from "react-router-dom";

const Main = () => {
    const navigate = useNavigate();
    return (
        <>
        <div>
            <Button  onClick={() => {
                navigate('/study');
            }}>공부하기</Button>
            </div>
  </>
    );
}

export default Main;