[react] router 버전 해결 (react-router-dom)

먼저 버전 문제를 살펴 보자. 그 후에 사용법을 적어본다.

 

router 최신버전은 여기를 눌러서 확인하자.

 

0. 버전 문제 해결

최근 router가 버전 6으로 업그레이드가 됐다. 따라서 옛날 강의를 보는 사람들은 멘붕에 따졌을 것이라 생각한다. 왜냐하면 아래와 같이 명령어로 설치를 하니, switch가 없다고 뜨는 등의 에러가 떴을 것이다. 이 문제는 버전을 업그레이드 하면서 기존의 방식을 호환이 되지 않게 만들었기 때문이다.

 

$ npm install router-react-dom

 

간단한 해결책은 아래와 같다. (버전 6을 5로 변경해 준다.)

 

// 삭제
$ npm uninstall router-react-dom

// 재설치
$ npm install router-react-dom@5

 

아니면, package.json 파일의 dependencies 부분의 react-router-dom 부분의 버전을 아래와 같이 변경한 후에 npm i를 통해 재설치 하는 방법도 있다.

 

// before
"dependencies": {
	...
    "react-router-dom": "^6.1.6",
	...
},
  
  
// after
"dependencies": {
	...
    "react-router-dom": "^5.3.0",
	...
},

 

 

 

1. 버전 비교

1.1 router 비교

> 가장 많이 변경된 부분은 아래 <Switch>대신 <Routes>를 사용하는 것과 component={Home}이라 적었던 부분을 element={<Home />} 이라 적는 것일 것이다. 아래의 예시를 참고하자.

5버전의 router 예시

import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import Home from './components/home';
import Detail from './components/profile';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        {/* <Route path={"/home"} exact component={Home} /> */}
        <Route path={"/home"} exact>
          <Home />
        </Route>
        <Route path="/Detail">
          <Detail />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

 

 

 

6버전의 router 예시

import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import Home from './components/home';
import Detail from './components/profile';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" exact element={<Home />} />
        <Route path="/detail" exact element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

1.2 페이지 이동

> 페이지 이동 부분도 사실 좀 간편해 지긴했다.

5버전 history

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


...
const history = useHistory();

...
history.push('/detail')

...

 

 

6버전 navigate

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


...
const navigate = useNavigate();

...
navigate('/detail')

...