by Sai gowtham

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.

Home.js
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" />} />

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course