[React] Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

오류 내용

React로 Kakao Login을 구현하던 도중 위와 같은 에러가 발생했다.

 

---

 

오류 원인 및 해결

원인은 Link 태그를 사용하는 컴포넌트가 라우터로 감싸져 있지 않아 생긴 문제였다.
app.js에서 컴포넌트를 라우터로 감싸서 해결했다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import KakaoLoginComponent from './components/KakaoLoginComponent';
import { Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <KakaoLoginComponent></KakaoLoginComponent>
  </Router>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();