react-router-dom v5에서 link로 이동시 화면이 redirecting 되지 않음..

 

앞서 redux 예제를 만들어 보면서 ownProps 값에서 파라미터 값 등의 정보가 받아와지지 않아 react-router-dom을 v5로 다운그레이딩하는 과정을 경험했다..

 

[Redux] 컴포넌트에서 connect로 ownProps 받을 때 컴포넌트 props 값 모두 받아오기

 

그런데 생각해보니 react-router-dom에는 useParams 등과 같은 기능이 있는데 굳이 다운그레이딩하면서 ownProps에 파라미터 값을 받아와야할 이유가 없었음..기능 구현 시에도 특별히 필요할 것 같단 생각이 들지 않았다. (store에 저장된 state 정보는 잘 받아와지고 있었음)

 

거기다 제일 중요한건 이상하게 Link 요소가 제대로 연결이 안되는 오류가 발생한 것이다.

Link로 연결시 url에는 해당 파라미터로 변경이 되지만 화면상에는 redirect가 되지 않았다.

이것저것 수정해봤지만 Link의 redirecting 문제는 해결하지 못했다.

 

결국엔 최신 버전인 v6으로 다시 install했고, 문제는 깔끔하게 해결.

버전이 변경됨에 따라 일부 타 라이브러리와의 충돌이었을 수도 있겠단 생각이 든다.

 

 

 

 

+ 버전을 이리저리 바꾸던 중 실수로 인한 에러

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent}). If you meant to render a collection of children, use an array instead.

 

갑자기 이런 에러가 떠서 뭔가 ! 하고 봤더니

<Route path="/" element={Home} />

element는 반드시 html 요소로 들어가야 한다!

<Route path="/" element={<Home />} />