react-router-dom v5.3 Link 클릭시 페이지 이동안되는 현상

김민아·2023년 1월 11일

에러

발생 경위

react-router-dom v5.3 Link를 클릭했을 때, url의 경로는 바뀌는데 의도한대로 Route에 연결된 컴포넌트로 페이지 이동되지 않는 현상이었다. Switch, Route, Link를 감싸는 BrowserRouter가 최상위에 위치하고 있었고 강의 코드와 거의 동일해서 무엇 때문인지 유추하기 어려웠다.

// App.tsx
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

<Router>
  <Switch>
    <Route exact path="/" component={Coins} />
    <Route path="/:coinId" component={Coin} />
  </Switch>
</Router>

// Coins.tsx
<CoinList>
  <Coin>
    <Link to={`/${coin.id}`}>{coin.name}</Link>
  </Coin>
</CoinList>

Link doesn't work when I click on it

먼저 제대로 적용된 것이 맞는지 확인해보기 위해 react router v5를 확인해 보고, SO에 동일한 문제를 겪은 사람이 있는지 검색해 보았다.
Link가 제대로 작동하지 않을 때, BrowserRouter 최상단에 위치하는지 혹은 두번 감싸지 않았는지 몇가지 시도해보다가 정.확.히 같은 에러에 대해 올라온 답변을 찾을 수 있었다.

✅ react-router-dom@5.3.3 이전 버전과 React18의 호환성 이슈

There's a compatibility issue between pre-5.3.3 versions of react-router-dom@5 and react@18.

[v5] Not compatible with React 18 StrictMode

Fix: make v5 Router compatible with v18 StrictMode
Fix was merged on May 18th, 2022, react-router-dom v5.3.3.

👉 원문

나의 경우, 설치된 react-router-dom은 @5.3.0이었고, react는 @18 이었다. 예제와 동일한 환경을 맞추기 위해서 첫번째 해결 방법으로 쉽게 해결할 수 있다. 또는 위 문제가 맞는지 아래 두번째 방법으로 간단히 테스트해 볼 수 있다. (아무튼 그저 빛 ✨⭐️✨)

해결

router@5를 유지하기 위해서 호환성 이슈가 수정된 5.3.3 버전을 재설치하는 방법이 가장 적합하다고 생각했다. 생각해보니 처음에 npm i react-router-dom@5.3이라고만 설치했던 것 같다.

1. react-router-dom@5.3.3으로 재설치 (권장)

npm uni -S react-router-dom
npm i -S react-router-dom@5.3.3  #(or @latest)

2. `BrowserRouter`로 `React.StrictMode`를 감싸기

index.tsx에서 BrowserRouter로 React.StrictMode를 감싸는 위치로 옮겨서 Link가 잘 나오는지 확인한다.

// 이런 구조를 (AS-IS)
<React.StrictMode>
  <BrowserRouter>
    ...
  </BrowserRouter>
</React.StrictMode>

// 이렇게 변경 (TO-BE)
<BrowserRouter>
  <React.StrictMode>
    ...
  </React.StrictMode>
</BrowserRouter>