CODEWITHSUNDEEP
javascriptreactjs
Liv Stan
Liv Stan

Reputation: 429

Why is state undefined when passed through React Router Link Component?

I am trying to pass props through the React Router Link Component but the state remains undefined, does anyone have an idea of why?

The Route:

<Route path="/movie" component={Movie} render={props => 
<Movie {...props} />} />

The Link: 

<Link to={{ pathname: '/movie', state: { fromMovieList: true}}} > 
Title </Link>

The component rendered from the path "/movie"

class Movie extends React.Component {

  render () {
    console.log(this.props.location.state); // undefined
    return (
      <div> Hello </div>
        )
      }
    }

export default Movie;

Upvotes: 11

Views: 12271

Answers (1)

Jo&#227;o Cunha
Jo&#227;o Cunha

Reputation: 10307

You must wrap the Movie component with withRouter;

You can get access to the history object’s properties and the closest Route's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

export default withRouter(Movie);

Upvotes: 11

Related Questions