스토리북에서 React Router v6 이상 에러 발생시 문제 해결 방법

스토리북8.x이상 에서 React Router v6 이상 버전을 사용시에 스토리북에 있는 공통 컴포넌트들에서 라우팅 사용 관련 에러가 발생하는 경우가 있습니다. 

// 에러 문구
useNavigate() may be used only in the context of a <Router> component.

에러가 발생하는 원인은 무엇인가?

1. React Router 의 훅들을 사용하기 위해서는 라우터가 필요합니다.
2. 스토리북은 파일 서버 기반의 환경과 컴포넌트를 독립적으로 사용하는 특성으로 인해 라우터를 제공하지 않습니다.
3. 이를 해결하기 위해 createMemoryRouter 를 이용하여 메모리 라우터를 별도로 만들고 스토리북에 직접 라우터를 제공합니다. 이를 이용하면, 브라우저의 URL 을 변경하지 않아도 메모리에 있는 라우팅을 이용해서 테스트할 수 있습니다.
 

설정

1. createMemoryRouter 설정

// test.stories.tsx

import { createMemoryRouter } from 'react-router-dom'

const router = createMemoryRouter([
  {
    path: '/',
    element: <Test />
  }
])

 
2. decorators, RouterProvider 설정
위에서 생성한 router 를 RouterProvider 에 전달하여 라우터 컨택스트를 만들어주고 decorators 에 설정해줍시다.

const TestStoreis = {
  title: 'test',
  tags: ['autodocs'],
  component: Test,
  decorators: [
    () => <RouterPrivider router={router} />
  ]
}

export default TestStoreis

 
이와 같이 하면 문제가 해결됩니다.