[React / 라우팅 오류] 주소는 바뀌는데 페이지는 넘어가지 않을 때

📌 문제상황

기능 구현 전에 틀을 잡아두기 위해 리액트 페이징을 위해 페이징을 하는데,
주소가 바뀌는데도 페이지는 넘어가지 않는 문제 발생

• 본문을 헤더, 메인, 푸터로 나누고 헤더 부분(nav)에서 링크로 선택하면 메인이 바뀌어야 하는데, 주소만 바뀌고 새로고침 해야지만 라우팅 되는 버그 발생

💻 문제원인

1. 라우터 버전이 안 맞을 때

• 현재 라우터 버전 5.3.0에서 최신 버전으로 업데이트 하고 문법을 바꿔도 적용이 안 됨

2. Router가 1개가 아니라 2개 있을 때

• 눈을 크게 뜨고 찾아도 크게 감싸는 1개 밖에 안 보임

📚 해결방법

그렇게 구글링을 하던 중, app.js에서 index.js로 라우터를 옮기고, React.StrictMode를 삭제하라는 글을 발견

React.StrictMode
리액트에서 제공하는 개발 모드에서의 보조 도구로 애플리케이션 내에서 잠재적인 문제를 감지하고 경고를 표시함 (주로 개발 환경에서만 사용되며, 프로덕션 환경에서는 자동으로 비활성화돼서 삭제해도 무방)

이렇게 고치니까 라우팅 문제 없이 잘 된다 👍