react-router-dom v6 + Storybookでページ間のStateを取得する

前提

• 以下のように前のページからStateをもらって動作するようなページのStorybookの作り方です。

import React, { useEffect, useState } from 'react'

const page: React.FC = () => {
  const [title, setTitle] = useState<string>()

  const location = useLocation()
  useEffect(() => {
    setTitle(location.state as string)
  }, [])

  return (
    <div>
      {title && <h1>{title}</h1>}
    </div>
  )
}
export default page

Storybook

• 遷移元（Dummy）を用意する
• useNavigateを使って遷移させる（stateを使う）
• 遷移元（Dummy）のパスは/にする

import React, { useEffect } from 'react'
import { MemoryRouter, Route, Routes, useNavigate } from 'react-router-dom'

import Page from './page'

const Dummy: React.FC = () => {
  const navigate = useNavigate()
  useEffect(() => {
    navigate('/a', { state: 'ダミータイトル' })
  }, [])

  return (
    <div>HOME</div>
  )
}


const template: Page = () => {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Dummy />} />
        <Route path="/a" element={<Page />} />
      </Routes>
    </MemoryRouter>
  )
}

export const normal = template.bind({})
normal.storyName = 'Default'