UseRouteMatch does not match id of URL

Hi Folks

I have a list of urls to display, each with their own id, and the idea is to click on the url and it will open in a separate component. But when i try to get the id of the url using UseRouteMatch, i cannot get it to work. It never gets the value. It works fine in vanilla React.

This is the route

<Route path="/anecdotes/:id"> 
      <Anecdote anecdote = {anecdote}/>
</Route>

The code to display the anecdote (individual) is here

const Anecdote = ({ anecdote }: any) => {
  console.log('anecdote is ', anecdote)
  return (
    <div>
      <h2>{anecdote.content}</h2>
      <p>{anecdote.author}</p>
      <p>{anecdote.info}</p>
      <p>{anecdote.votes}</p>
    </div>
  )
}

The code to match the url is here

const match = useRouteMatch('/anecdotes/:id')
  const anecdote = match 
    ? anecdotes.find(anecdote => anecdote.id === (match.params.id))
    : null

I get the error “Property id does not exist on type {}”. The id is for match.params.id. The same code works fine for react. match comes out as empty.

Does it have something to do with Ionic components? For example, wrapping the contents in IonPage or IonHeader?
Any help would be helpful, thanks.

I solved it by using UseRouteMatch in the component and then sending the whole data to the component, and filtering the one i clicked on out. Like the following

const Anecdote = ({ anecdote, all }: any) => {
  console.log('anecdote is ', anecdote)
  console.log('path is ',useRouteMatch())
  console.log('all is ', all)
  let {path, url} = useRouteMatch()
  console.log('id is ',url.split('/')[2])
  const data = all.find((alll: any) => alll.id === url.split('/')[2])
  return (
    <div>
      <h2>{data.content}</h2>
      <p>{data.author}</p>
      <p>{data.info}</p>
      <p>{data.votes}</p>
      {/* <div>{note.user}</div> */}
      {/* <div><strong>{note.important ? 'important' : ''}</strong></div> */}
    </div>
  )
}

Thanks