Unable to access this.props.location in component after redirect

Question

Somewhere in component 1, I have this:

if (redirectToReferrer) {
    return <Redirect to={{
          pathname: "/test/new",
          state: { event: "test" }
     }} />;
}  

In my component 2, I have this:

constructor(props){
    super(props);
    console.log(this.props.location) //undefined
}

According to the docs, this should work.

The state object can be accessed via this.props.location.state in the redirected-to component. This new referrer key (which is not a special name) would then be accessed via this.props.location.state.referrer in the Login component pointed to by the pathname '/login'

Why is this.props.location undefined?

Answer 1

Ensure "/test/new" is defined by a <Route/> component in App.js or wherever you have defined the routes.

<Route path="/test/new" component={NewTestComp}/>

If you've defined the using the render method make sure you are passing the props to your component like this.

<Route path="/test/new" render={(props) => <NewTestComp {...props}/>}/>