[Storybook] React-router 사용 시 에러 해결 방법

storybook에서 react-router를 사용했더니 다음과 같은 에러가 나타났다.

Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.

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

해결 방법

1. MemoryRouter를 import한다.

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

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

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

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