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}) {
  ...
}