주소값은 바뀌는데 화면은 그대로? 리액트 라우팅 에러

단계	내용
문제	react-router-dom과 connected-react-router를 활용하여 라우팅 설정을 완료했다. history.push()를 활용할 때 url은 정상적으로 바뀌지만, 페이지는 다시 그려지지 않는 현상이 발생했다.
원인예측	1. 중복 사용된 Router가 있어, 라우터 간 정보 전달에 실패 2. Router가 하위 컴포넌트에 작성-동작 3. 디펜던시 버전 변경으로 인한 작동 오류
해법나열	1. 라우터를 하나로 수정하거나, url정보 전달 방식 수정한다 2. 라우터를 App.js에서 최상위 컴포넌트 index.js로 옮긴다 3. 디펜던시 매뉴얼에 맞춰 컴포넌트, 함수를 수정한다
적용	1. 라우터는 App.js에서 하나만, 스위치는 Routes에 있는 하나만 정상적으로 작동하고 있어서 문제 상황과 맞지 않았다. 2. 정상적으로 라우팅-렌더링 되는 것을 확인했다. 3. 이전에 사용 했던 react-router-dom 5.3.0버전과 conntected-react-router 6.9.2버전을 활용했지만 같은 문제가 발생했다.
결과	2.번 해법대로 컴포넌트를 index.js로 옮겼다. 정상적으로 라우팅 기능이 동작한다. <확인해보니 index.js의 React.StrictMode를 Router의 내부에 작성하지 않으면, 같은 index.js에 있어도 오류가 발생했다. 아예 StirictMode를 제거한 경우에도 정상 작동했다. React.StrictMode의 특성에 의한 것으로 파악된다.

React.StrictMode

StrictMode는 프로젝트 내부 잠재적 문제를 검사하는 도구다. 프레그먼트처럼 UI를 렌더링하지 않으며, 하위 컴포넌트에 대한 검사-경고를 활성화 한다.

Strict모드는 개발모드(npm run start 혹은 yarn start)에서만 활성화 되기 때문에, 프로덕션 빌드(npm build 혹은 yarn build)에는 영향을 끼치지 않는다.

마무리

답은 생각보다 간단하다!

참고문서

React공식문서 - Strict모드