Missing parameter 'id' for route redwood

Get Help and Help Others
1

Howdy Folks,

I am stuck on an error when creating dynamic routes.

I have a couple of routes

 <Route path="/video/{id:String}" page={VideoPage} name="video" />
<Route path="/video/new/{id:String}" page={NewUserVideoPage} name="newUserVideo" />

When navigating to http://localhost:8910/video/new/1234 I get the following error

Missing parameter ‘id’ for route ‘/video/new/{id:String}’.

I have an idea param there so not sure what’s up

the code on the page is

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

type NewVideoPageProps = {
  id: string
}

const NewUserVideoPage = ({ id }: NewVideoPageProps) => {
  return (
    <>
      <MetaTags title="NewUserVideo" description="NewUserVideo page" />

      <h1>NewUserVideoPage {id}</h1>
      <p>
        Find me in{' '}
        <code>./web/src/pages/NewUserVideoPage/NewUserVideoPage.tsx</code>
      </p>
      <p>
        My default route is named <code>newUserVideo</code>, link to me with `
        <Link to={routes.newUserVideo()}>NewUserVideo</Link>`
      </p>
    </>
  )
}

export default NewUserVideoPage

Can anyone tell me where I am going wrong?

I just tired a fresh page which was not using a nested route and I am getting the same issue

Using the latest version of RW

Thanks
Shannon

2

@shansmith01 you’ll need to be fetching that data from somewhere in order to pass it as a prop. Do you have a corresponding Cell for the VideoPage, .e.g. a VideoCell component?

The Tutorial can help you here. Check out how the BlogPostCell is used along with the BlogPostPage. See these two sections for the pattern:

3

Ah Magic :slight_smile:
Thanks David

4

@shansmith01 I think your specific error comes from this line

Since you’ve made the route to the New User Video page take a parameter you need to pass it to the newUserVideo() function on routes, like this:

<Link to={routes.newUserVideo({ id: 42 })}>NewUserVideo</Link>

4 Likes
7

I had the same issue and it was exactly as @Tobbe said, it was the link that is included by the page generator that I needed to remove (the one that points back to itself).

     <p>
        My default route is named <code>bookSlot</code>, link to me with `
        <Link to={routes.bookSlot()}>BookSlot</Link>`
      </p>

It happened as soon as I added a param in routes.tsx for the bookSlot route.