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

컴포넌트 라우팅 작업을 하고 있는데, 제목과 같은 에러가 자꾸 떴다.

원인은 link태그를 사용하는 컴포넌트가 라우터로 감싸져 있지 않아 생긴 에러였다.

이 코드를,

function App() {
  useEffect(() => {
    document.body.style.overflow = 'hidden';
  }, []);

  return (
    <AppContainer>
      <GlobalStyle />
      <Header />
      <MainContainer>
        <SideBar />
        <Router>
          <Routes>
            <Route path="/" element={<Main />} />
            <Route path="/search" element={<Search />} />
            {/* <Route path="/post" element={<Post />} /> */}
            {/* <Route path="/mypage" element={<MyPage />} /> */}
          </Routes>
        </Router>
      </MainContainer>
    </AppContainer>
  );
}

이렇게 바꿔주니 해결되었다. 

Sidebar 컴포넌트에서 Link를 사용하기 때문에 Sidebar 컴포넌트도 Router 태그 안으로 쏙 들어가야 한다.

function App() {
  useEffect(() => {
    document.body.style.overflow = 'hidden';
  }, []);

  return (
    <AppContainer>
      <GlobalStyle />
      <Header />
      <MainContainer>
        <Router>
          <SideBar />
          <Routes>
            <Route path="/" element={<Main />} />
            <Route path="/search" element={<Search />} />
            {/* <Route path="/post" element={<Post />} /> */}
            {/* <Route path="/mypage" element={<MyPage />} /> */}
          </Routes>
        </Router>
      </MainContainer>
    </AppContainer>
  );
}