Passing props to route component in React Router
In this post we will give you information about Passing props to route component in React Router. Hear we will give you detail about Passing props to route component in React RouterAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to pass props to the componentin 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" />} />Hope this code and post will helped you for implement Passing props to route component in React Router. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs