Mock React Router location inside Storybook stories

👋 FYI, this note is over 6 months old. Some of the content may be out of date.

With a component like this:

import { useParams } from 'react-router'

export const ParamsComponent = ({ firstName, lastName }) => {
  const params = useParams<{ id: string }>()
  return <div>{JSON.stringify(params, null, 2)}</div>
}

And a story like this:

import React from 'react'
import { MemoryRouter, Route } from 'react-router'
import { ParamsComponent } from './ParamsComponent'

export default {
  title: 'ParamsComponent',
  component: ParamsComponent,
}

export const Default = () => {
  return (
    <MemoryRouter initialEntries={['/user/108']}>
      <Route path="/user/:id">
        <UserCard />
      </Route>
    </MemoryRouter>
  )
}

The story should render this:

{ id: '108' }

← Back home