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

문제가 발생한 코드

function App() {
  return (
    <div className='container m-5 text-center'>
      <h3>날씨를 알아보자</h3>
          <Link to='/weather'>날씨</Link>
          <Link to='/weatherSearch'>날씨</Link>
      <Router>
        <Routes>
          <Route path='/weather' element={<Weather />}></Route>
          <Route path='/weatherSearch' element={<WeatherSearch />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

 

해결방법

<Router> 태그는 리턴값 안에서 최상단에 위치해야 한다.

react-router-dom에 해당하는 Link태그가 <Router>로 감싸져있지 않아서 발생한 에러이다.

react-router-dom에서 가져온 모든 태그를 <Router>로 감싸고 <Router>를 최상단에 놔두면 된다!

 

//수정한 코드
function App() {
  return (
    <Router>
      <div className='container m-5 text-center'>
        <h3>날씨를 알아보자</h3>
            <Link to='/weather'>날씨</Link>
            <Link to='/weatherSearch'>날씨</Link>
        <Routes>
          <Route path='/weather' element={<Weather />}></Route>
          <Route path='/weatherSearch' element={<WeatherSearch />}></Route>
        </Routes>
      </div>
    </Router>
  );
}