title: React-router not matching any route on Link or NavLink click (but it works if we do a refresh)
body: <p>I've spent many hours trying to debug a problem with React-Router-Dom today but with no success, so I'm writing this post. I have no idea what's going on.</p>
  <p>Before describing you the problem, here are the versions of the packages used here:</p>
  <pre><code>React: ^16.6.3
  react-dom: ^16.6.3
  react-router-dom: ^5.2.0
  </code></pre>
  <p>I have a React app with a Root component rendered by <code>ReactDOM.render</code>. It renders redux's Provider and a Router for the two basic cases of the app depending on whether the user is connected or not.</p>
  <p>Root.tsx:</p>
  <pre><code>interface Props {
    store: StoreType
  }
  
  const Root: FunctionComponent&lt;Props&gt; = ({ store }) =&gt; (
    &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
        &lt;Route path=&quot;/login&quot; component={Login} exact /&gt;
        &lt;Route path=&quot;/&quot; component={Dashboard} /&gt;
        &lt;Route // this route was just been added to debug my problem
          path=&quot;*&quot;
          render={props =&gt; {
            console.log(props)
            return &lt;div&gt;Hello&lt;/div&gt;
          }}
        /&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;
  )
  
  export default Root
  </code></pre>
  <p>The Dashboard is a layout container that renders a sidebar, a topbar and the main section where all my routes are rendered in a <code>SwitchRoutes</code> component. It fetches the needed data from an api and displays a loader while doing so.
  Here's it's render function.</p>
  <p>Dashboard.js:</p>
  <pre><code>render() {
      const { classes, ...rest } = this.props
  
      if (!this.state.loader.appReady) {
        return &lt;CustomLoader ready={this.state.loader.dataFetched} /&gt;
      }
  
      if (this.props.users.redirectTo !== null) {
        return &lt;Redirect to={this.props.users.redirectTo} /&gt;
      }
  
      const { zones } = this.props
  
      return (
        &lt;div className={classes.wrapper}&gt;
          &lt;ErrorBoundary component=&quot;Sidebar&quot;&gt;
            &lt;Sidebar
              routes={dashboardRoutes(role().shift()).reduce(
                sitesReducer(get(zones, &quot;list&quot;).filter(zone =&gt; zone.zoneLevel.id === this.firstLevelZone)),
                []
              )}
              logo={logo}
              toggleMenu={this.toggleMenu}
              open={this.state.openedMenu}
              color=&quot;red&quot;
              {...rest}
            /&gt;
          &lt;/ErrorBoundary&gt;
  
          &lt;div className={classes.mainPanel} ref=&quot;mainPanel&quot;&gt;
            &lt;TopBar toggleMenu={this.toggleMenu}&gt;{this.topbarContent}&lt;/TopBar&gt;
  
            &lt;div className=&quot;spectral__layout-page-name default-font&quot;&gt;
              &lt;h5&gt;{this.pageName()}&lt;/h5&gt;
            &lt;/div&gt;
  
            &lt;div className={classes.content}&gt;
              &lt;div className={classes.container}&gt;
                {this.state.materialRoutes.length &amp;&amp; (
                  &lt;ErrorBoundary component=&quot;SwitchRoutes&quot;&gt;
                    &lt;SwitchRoutes materialRoutes={this.state.materialRoutes} /&gt;
                  &lt;/ErrorBoundary&gt;
                )}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  <p>And the SwitchRoutes component:</p>
  <pre><code>const SwitchRoutes = ({ materialRoutes }) =&gt; {
    return (
      &lt;Switch&gt;
        {dashboardRoutes(role().shift()).map(prop =&gt; {
          if (prop.redirect) return &lt;Redirect from={prop.path} to={prop.to} key=&quot;redirect&quot; /&gt;
          if (prop.children &amp;&amp; prop.children.length) {
            return prop.children
              .filter(c =&gt; c.onSidebar)
              .map(c =&gt; {
                return &lt;Route exact={c.exact} path={c.path} component={c.component} key={`route_${c.path}`} /&gt;
              })
          }
          if (prop.path.startsWith(&quot;/materials&quot;)) {
            return (
              &lt;Route
                path=&quot;/materials&quot;
                key=&quot;route__material_wrapper&quot;
                render={props =&gt; &lt;MaterialIndexModule {...props} routes={materialRoutes} /&gt;}
              /&gt;
            )
          }
          return &lt;Route exact={prop.exact} path={prop.path} component={prop.component} key={`route_${prop.path}`} /&gt;
        })}
        &lt;Route component={NotFound} path=&quot;*&quot; /&gt;
      &lt;/Switch&gt;
    )
  }
  </code></pre>
  <p>This renders locally if I do a refresh, so I know that react-router matches with &quot;/&quot; to render my Dashboard and then the other routes. But when I click on any link to go to another page, the Dashboard then unmounts and I'm just left with the Root component being rendered. Quite confusing.
  Each component rendering a Link or a NavLink is exported with react-router-dom's withRouter HOC, and it still fails to render anything.</p>
  <p>In case you need more information, here's an extract of the array <code>dashboardRoutes</code> I'm mapping over in SwitchRoutes and Sidebar:</p>
  <pre><code>const dashboardRoutes = role =&gt; [
    {
      name: &quot;Home&quot;,
      path: &quot;/&quot;,
      exact: true,
      component: App,
      onSidebar: false,
      sidebarName: &quot;&quot;,
      navbarName: &quot;&quot;,
      icon: PinDrop,
    },
    {
      name: &quot;scenarios&quot;,
      path: &quot;/scenarios&quot;,
      component: Scenarios,
      exact: false,
      onSidebar: true,
      sidebarName: &quot;Scenarios&quot;,
      navbarName: &quot;Scenarios&quot;,
      icon: PinDrop,
    },
    {
      name: &quot;materials&quot;,
      path: &quot;/materials&quot;,
      component: Materials,
      onSidebar: true,
      exact: false,
      sidebarName: &quot;Materials&quot;,
      navbarName: &quot;Materials&quot;,
    }
  ]
  </code></pre>
  <p>As said before, once the app is rendered, any link I click on fails to render the Dashboard and sends me the not-found route I've added in the Root component. When I log the match and location props, here's what is printed:</p>
  <pre><code>{
    location: {
      hash: &quot;&quot;
      key: &quot;koo33kue&quot;
      pathname: &quot;/materials/rooms/18&quot; // the route I wanted to reach
      search: &quot;&quot;
      state: null
    },
    match: {
      params: {0: &quot;undefined&quot;},
      url: &quot;undefined&quot;,
      path: &quot;*&quot;,
      isExact: false
    }
  }
  </code></pre>
  <p>What am I missing here?</p>