TypeError: Cannot read properties of null (reading 'useContext') useContext (feat. useLocation 이노오옴!)

여느날과도 같이 코딩중에

pathname을 가지고 놀기 위해서

useLocation 훅을 추가했다.

딱 코드에 쓰고 저장을 하는 순간 에러가 빡.

 

 

흐음..? 갑자기?

훅 위치가 잘못되었나.. 같은 페이지에 useState도 이미 사용중이라 아닌것 같은데..

어림도 없지. 바로 훅 위치의 잘못이었다 ^오^

BrowserRouter나 HashRouter 내부에서 useLocation 훅을  사용했어야 했다... 

 

 

 

해당 훅을 왜 내부에서 사용해야 할까?useLocation외에도  react-router-dom이 제공해주는 훅들은 모두 BrowserRouter나 HashRouter 내부에서 사용되어야 한다.

 

 

 

위 훅들은 현재 위치, 탐색, 라우터 상태등을 제공하는 라우터 컨텍스트에 의존하는데,

이 컨텍스트는 BrowserRouter나 HashRouter에서 생성하고

어플리케이션의 하위 컴포넌트로 전달된다. 

라우터 컨텍스트가 없는 밖에서 useLocation 훅을 사용하고자 했으니참고할 컨텍스트가 없어서 에러가 발생했던것!