withRouter's match prop always returning the same path.

[enrique-ramirez]

Version

react-router-dom 4.2.2

Test Case

https://codesandbox.io/s/zw3okzz8ox

Steps to reproduce

Wrap a component with withRouter and then check the match prop.

Expected Behavior

props.match.path should update with the current path.

Actual Behavior

props.match.path always points to /.

Additional notes:

props.match.url behaves exactly the same: it always points to /. The only property that seems to change correctly is isExact, which is not of much use.

[enrique-ramirez]

Woah, I seem to have messed thing up. withRouter seems to be meant to be inside a <Route> component or it won't work.

Now I have a question: I want to do something similar to the test case: have a global header that is aware of the current path.

I'm currently doing it pretty much like the test case, but match always returns /. Is there a better way to do this, other than connecting my header to the store?

[timdorr]

The match isn't global or singular. There are potentially many within a component tree. It's relative to the nearest Route in your list of ancestors. withRouter just wraps your component with a pathless Route, so that's currently that route itself, which matches on the / part of the URL (which is always there).

[enrique-ramirez]

@timdorr thank you. I got it now.

Going to answer my own question in case someone stumbles upon this.

I created a layout. Basically, my routes now look like this:

function Layout(props) {
  const {
    component: Component,
    route,
  } = props

  return (
    <div>
      <Header />
      <Component route={route} />
      <Header />
    </div>
  )
}

function Routes() {
const layoutRender = component => route => <Layout component={component} route={route} />

return (
  <Switch>
    <Route
      path="/projects"
      render={layoutRender(Projects)}
    />
    <Route
      path="/"
      render={layoutRender(Splash)}
    />
  </Switch>
)

My <Header /> and <Footer /> components are functional components wrapped with withRouter, which now obtain the proper path.

Hope this helps someone!