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

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

참고자료

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

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

첫번째

  • <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>

두번째

  • 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;

​ ​ ​