[에러] react-router-dom url

문제: react-router-dom을 이용하여 페이지 전환을 하던 중, Link태그 클릭으로 url을 변경했지만 요소가 렌더링 되지 않음
이유: react-router-dom@5및 의 5.3.3 이전 버전 간에 호환성 문제가 있음
해결방안 3가지:

첫번째 방법
1. React Router 5.3.x를 사용하는 경우 package.json 파일에서 5.3.3인지 확인
2. 5.3.3이 아닌 경우 마지막 버전을 제거한 다음, 버전 5.3.3에서 업데이트한 버그 없는 버전을 설치

npm uninstall -S react-router-dom
npm install -S react-router-dom@5.3.3( 또는@latest )

두번째 방법
index.js 수정

// 수정 전
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 수정 후
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
</BrowserRouter>
);

세번째 방법
index.js 파일에서 Strict 모드를 제거

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
    <App />
</BrowserRouter>
);

참고
https://stackoverflow.com/questions/71832720/link-tag-inside-browserrouter-changes-only-the-url-but-doesnt-render-the-compo