오류 | react-router-dom dynamic route & Link component( = useNavigate or redirect)

react-router-dom 라이브러리의 Link 컴포넌트( = useNavigate or redirect)를 사용할때, 작동이 제대로 되지 않는 상황

❓상황

react-router-dom의 dynamic route를 이용하여 id param을 부여하여 URL을 생성하는 Route를 만들었다.
dynamic route가 아닌 정적 route에서 URL이 다를 경우에는 Link 컴포넌트가 잘 작동했지만,
id param을 가진 URL에서, 다른 id param을 가진 URL로 이동할때, Link 컴포넌트가 작동하지 않는다.
또한, useNavigate hooks와 redirect 함수도 마찬가지로 작동하지 않는다.

🔎 원인 파악

Route 컴포넌트를 이용하여 같은 컴포넌트를 렌더링 할 경우, React는 리렌더링 할 가치를 느끼지 못해 리렌더링이 발생하지 않는다.

즉, 다른 컴포넌트간은 React가 리렌더링하여 페이지 이동이 잘 작동하고,
같은 컴포넌트의 경우에는 React가 리렌더링하지 않아 페이지 이동이 작동하지 않는다.

✨ 해결 방법

dynamic route를 이용하여 렌더링하는 컴포넌트에 key를 부여한다.
같은 컴포넌트더라도 React가 다른 컴포넌트라고 구분할 수 있게 만들어 준다.