Mocking route id in storybook

Hi All,

Quick question.

I have generated a page that takes in a URL Param of id. Eg:

<Route path="/playlist/{id:Int}" page={PlaylistPage} name="playlist" />

My component looks like this

import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

type Props = {
  id: number

const PlaylistPage: React.FC<Props> = ({ id }) => {
  return (
      <MetaTags title="Playlist" description="Playlist page" />

      <h1>PlaylistPage = {id}</h1>
        Find me in <code>./web/src/pages/PlaylistPage/PlaylistPage.tsx</code>
        My default route is named <code>playlist</code>, link to me with `
        <Link to={routes.playlist()}>Playlist</Link>`

export default PlaylistPage

Over in storybook I am getting an error…

Missing parameter ‘id’ for route ‘/playlist/{id:Int}’ when generating a navigation URL.

How do I mock a URL param for storybook?


Hi @shansmith01
We just today merged some code to make this much easier.

Have a look at the changes introduced by that PR and see if that helps you figure out what you need to do

You are most likely getting this error because you didn’t pass the id to routes.playlist()

<Link to={routes.playlist({ id })}>Playlist</Link>