Passing props to route component in React Router

In this tutorial, we are going to learn about how to pass props to the component in React router.

Consider we have a route component like this.

import React from 'react';

function Home(props){
    return (
        <div>
           <p>{props.name}</p>           <p>This is home page</p>
        </div>
    )
}

export default Home;

Now, we need to pass the name prop to <Home> component via react router.

Passing props to a component

With the react-router v5, we can create routes by wrapping with a <Route> component, so that we can easily pass props to the desired component like this.

<Route path="/">
    <Home name="Sai" /></Route>

Similarly, you can use the children prop in v5.

<Route path="/" children={ <Home name="Sai" />} />

If you are using react-router v4, you can pass it using the render prop.

<Route path="/" render={() => <Home name="Sai" />} />