🛑 Storybook Error : useLocation() may be used only in the context of a <Router> component.

이 에러는 메세지에서도 알 수 있다 싶이 컴포넌트 내에서 useLocation() 메서드를 사용할때 이건 Router 컴포넌트 내에서만 사용 할 수 있다고 경고하는 에러다.

 

원래는 이 에러를 storybook-react-rouer 를 설치해 해결 할 수 있는거 같은데 최근 업데이트 된 React Router v.6 랑 호환이 안되는건지 뭔지 나는 적용이 잘 안됐다...ㅠ

그래서 이리저리 방법을 찾아보다 임시방편으로 아래와 같이 우선 해결했다.

 

function TestRouter({ children }) {
  return (
    <BrowserRouter basename={BASE_URL}>
      <Routes>
        <Route path="/*" element={children} />
      </Routes>
    </BrowserRouter>
  );
}

 

이런 아무 역할도 안하는 Router 를 하나 만들고

 

export const decorators = [
  Story => (
    <ThemeProvider theme={defaultTheme}>
      <GlobalStyle />
      <TestRouter>
        <Story />
      </TestRouter>
    </ThemeProvider>
  ),
];

.storybook/preview.js 파일 아래 decorators 에 추가해줬다.

일단 이렇게 적용을 하니 에러 없이 뜨긴 뜬다!

 

임시 해결! ^ _ㅠ)b