React-router: Route not sending correct Match object as prop

[JasonEtco]

Hello!

In attempting to use path params, I'm encountering an issue where the state of the <Route> shows the correct match object (with the correct path, params object) but a different match object is being passed to the render prop function. So here's some sample code:

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" render={props => <Home {...props} {...this.props} />} />
          <Route exact path="/users" render={props => <Users {...props} {...this.props} />} />
          <Route exact path="/users/new" render={props => <NewUser {...props} {...this.props} />} />
          <Route path="/users/:id" render={props => <User {...props} {...this.props} />} />
        </Switch>
      </div>
    )
  }
}

And some screenshots from dev tools to show you what I mean:

The User component, which should be getting the same match object from the above state as a prop:

Also note that for some reason isExact is true on the Route's state when it should be false. Am I doing something wrong, or is this a bug of some sort? Using react-router[-dom]@4.1.1 and it's under a react-router-redux <ConnectedRouter /> but I don't think that's the cause.

Thanks!

[pshrmn]

Is there a withRouter in your User.js file? Currently, a pathless <Route> (which is what withRouter uses to inject props into your component) creates a new match object. That is the most likely culprit, but it is difficult to say without seeing the User.js file.

If that is your issue, PR #4704 should fix it because it has pathles <Route>s reuse their parent match.

[JasonEtco]

@pshrmn Nope there is not a withRouter in the User component; sounds like there should be according to the current API but it seems like a bad idea. Glad to see that PR. Hopefully it'll be merged in soon, until then I'll take a look at using withRouter in all the many components I want to work like this. Thanks!

[pshrmn]

No, you don't need withRouter. The props from the render function are the same as the ones that are injected by withRouter.

[JasonEtco]

Well that's what I thought would be the case but my experience says the opposite. With the above code, wrapping the component exported from User.js in withRouter like export default withRouter(class User extends...) works as I would expect it to. The Route component's state is passed as a prop to the User component. If in the render attribute function I include a console.log(props.match) it shows an empty params object and the path being '/', regardless of what the Route component's state is.

[pshrmn]

That is odd. I put together a mini test case using your <App> and it works for me. https://codesandbox.io/embed/npAAE2Ep

[JasonEtco]

My actual code is basically that... I'll see if I can find any differences, but as far as I can tell it should be working just like that.

[danvoyce]

Be great if you could update your findings on here :)

[mcmunder]

Any news on this? Having the same problem here...