How to pass props to route in react router v5 with Typescript?

Question

I have a route that looks like this, which renders just fine:

<Route
  exact={true} 
  path="/"
  render={() => {
    return <Home/>
  }}
/>

If I add in any prop, I get the following warning:

<Route
   exact={true} path="/"
   render={() => {
     return <Home foo="bar"/>
   }}
/>

Type '{ foo: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'foo' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'. TS2322

How can I pass props to a component with Typescript and React Router?

My Home component looks like this:

type homeType = {
  foo: string
}

const Home: React.FC = ({foo}: homeType) => { 
  return <p>{foo}</p>
}

Looks like this has nothing to do with React Router, can you post your Home component? — QoP
Does this answer your question? react-router - pass props to handler component — Richard Price
Thanks, but no it does not. i can't even pass a static string like foo in my example. — turtle
It seems like this is what I need, but it's far far too difficult for me to understand: medium.com/@robjtede/… — turtle

Richard Price Richard Price · Accepted Answer · 2020-01-08T18:09:01

Your home component needs to be defined with the props which will be sent to it, i.e.

import React from 'react';

type CardProps = {
  title: string,
  paragraph: string
}

export const Card = ({ title, paragraph }: CardProps) => 
<aside>
  <h2>{ title }</h2>
  <p>
    { paragraph }
  </p>
</aside>

const el = <Card title="Welcome!" paragraph="To this example" />

So with your example i presume you have a component called Home, which should be defined as such

type HomeProps = {
  foo: string
}

export const Home= ({ foo }: HomeProps) => 
  <h2>{ foo }</h2>

How to pass props to route in react router v5 with Typescript?

1 Answers