withRouter wrapped component cannot access params when used in NavLink

I’ve searched the related issues and I didn’t find this exact bug. Apologies if I missed it.

The issue is that when I try to use a component wrapped with withRouter inside a NavLink, I don’t get the correct match prop. Weirdly, this is only an issue with NavLink. Everything works correctly within a regular Link.

Version

React Router Dom 4.3.1

Test Case

https://gist.github.com/zfletch/28bbaa330756607d40e4c2acf7d980b2

(Uncomment the NavLink code and click on the person 2 to see it break).

Steps to reproduce

1. Create a component using withRouter
2. Use this.props.match.params in that component
3. Place that component in a <NavLink> tag

Expected Behavior

It should work like in any other component (including <Link>). The match and params should be present.

Actual Behavior

match is null in some cases and {} in other cases. This causes incorrect behavior and errors when one of these components is used inside <NavLink>.

[itura]

I am seeing something simliar, also on react-router-dom 4.3.1 and 4.4.0-beta.7. In the snippet below, the log will show that the location prop updates as expected, but not the path or url of the match prop. I haven’t tried using the params. Interestingly, the isExact property seems to update correctly for match, but nothing else.

import React from 'react'
import { BrowserRouter, Route, Link, withRouter } from 'react-router-dom'

const Thing = withRouter(({ match, location }) => {
  console.log(match, location)
  return 'darn '
})

const Index = () => 'index'
const About = () => 'about'

export default () => (
  <BrowserRouter>
    <div>
      <Thing />
      <Link to='/'>LinkToIndex </Link>
      <Link to='/about'>LinkToAbout </Link>
      <Route path="/" exact component={Index} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>
)

[StringEpsilon]

A fix would be to forgoe using the match provided by Route in NavLink and instead call matchPath() there directly.

Something like this: (Snippet)

// NavLink render():
<Route
  location={location}
  children={({ location }) => {
    const match = location.pathname && escapedPath ?
      matchPath(location.pathname, { path: escapedPath, exact, strict}):
      null;
    const isActive = !!(isActiveProp
      ? isActiveProp(match, location)
      : match);

But I’m not entirely sure if that is a viable solution.