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?

did you want to pass state to the other component or you just need to location (path) ? — Amir Mohammad Moradi, May 14 '18 at 11:09
@AmirmohammadMoradi I want to be able to access the state in my second component, like it's mentioned in the docs via: `this.props.location.state.event` — kemicofa ghost, May 14 '18 at 11:10
based on https://stackoverflow.com/questions/41466055/how-do-i-pass-state-through-react-router your code should work. can u upload your code on fiddle or sandbox to see? — Amir Mohammad Moradi, May 14 '18 at 11:17
@AmirmohammadMoradi do I need to include browserHistory in the ? I see it mentioned from time to time, or is it automaticlaly handled? — kemicofa ghost, May 14 '18 at 11:18
to use browserHistory you should do : `import { browserHistory } from 'react-router'` at first. — Amir Mohammad Moradi, May 14 '18 at 11:28
@AmirmohammadMoradi apparently it was deprecated, and replcaed by BrowserRouter — kemicofa ghost, May 14 '18 at 11:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170998/discussion-between-amirmohammad-moradi-and-rottenoats). — Amir Mohammad Moradi, May 14 '18 at 11:30

score 6 · Answer 1 · answered Sep 12 '19 at 05:13

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}/>}/>

score 0 · Answer 2 · answered May 14 '18 at 12:10

0

Technically components directly routed like this:

<Route path="/about" component={About} />

has props provided by react router such as location so make sure wherever you are redirecting, that component has a route defined.

answered May 14 '18 at 12:10

Lelouch

910
6
19

score 0 · Answer 3 · answered Jan 15 '21 at 19:25

0

Upgrade to the latest version of react-router-dom. Currently on version 5.2.0

answered Jan 15 '21 at 19:25

Kevin Kiwango

111
1
4

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

3 Answers3