How to pass data to components through router in react js

How to pass data to components through router in react js

Posted by Ervin Adams on June 28, 2022

How to pass data to components through router in react js

How to pass data to components through router in react js

Posted by Ervin Adams on June 28, 2022

If you want to pass data to a component through React Router:

Replace this:

<Route path="/home" component={Home} />

with this:

<Route path="/home" render={props => <Home {...props} flagCheck={this.state.flagCheck} />} />

The render prop is placed in the Route, the Home component is then placed in the render prop. Finally, place the data in a prop within the Home component, in this case it is the flagCheck prop containing the flagCheck state.

In the Home component use the data like this:

In a class component:

this.props.flagCheck

In a function:

function Home({flagCheck}) {
  ...
}

 

This field is required
Your question have been successfully submitted and will be reviewed before published
Please login to ask a question