【ReactRouter】NavLinkを持ったコンポーネントがStorybookで動かなかった

事象

React Router v6でNavLinkを持ったコンポーネントを、Storybook上で動かそうとしたら以下のエラーが発生した。

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

Header.tsx

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

export const Header = () => {
  return (
    <header>
      <nav>
        <ul>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/titles">Titles</NavLink>
          <NavLink to="/about">About</NavLink>
        </ul>
      </nav>
    </header>
  )
}

解決策

• preview.tsxで起点となっている<Story />を、<BrowserRouetr>で囲む

.storybook/preview.tsx

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (Story) => (
      <>
        <BrowserRouter>
          <Story />
        </BrowserRouter>
      </>
    ),
  ],
}

アプリ側の<App />を<BrowserRouetr>で囲って動いていたため、もしやと思い試してみたら解決しました。