Storybook에서 React-router 사용 시 에러 해결 방법 (with TypeScript)

typescript로 제작한 react 프로젝트에서 react-router를 사용했더니 storybook에 다음과 같은 에러가 나타났다.

Cannot destructure property 'basename' of 'reactWEBPACK_IMPORTED_MODULE_0.useContext(...)' as it is null.
Call Stack
LinkWithRef
vendors-node_modules_react-router-dom_dist_index_js.iframe.bundle.js:4581:5
renderWithHooks

이렇게 에러가 나는 이유는 storybook에서 해당 route를 찾지 못하기 때문이다.

해결 방법

1. MemoryRouter를 import한다.

   • import { MemoryRouter } from "react-router-dom";

2. router를 사용하는 story에 decorators를 설정하고, <Story/>를 <MemoryRouter>로 감싸주면 된다.

   • decorators: [(Story) => <MemoryRouter><Story/>

import { MemoryRouter } from "react-router-dom";
...
export default {
    title: 'components/Header',
    component: Header,
    decorators: [(Story) => <MemoryRouter><Story/></MemoryRouter>]
} as Meta