React-роутер не рендерит компонент

Question

У меня есть вложенный маршрут, который не отображает переданный компонент.

В моем app.js у меня есть такая настройка роутера, и все отлично работает

<Router>
        <div className="App">
          <Route exact path="/register" component={Register} />
          <Route exact path="/" component={Login} />
          <Switch>
            <PrivateRoute exact path="/dashboard" component={NavBar} />
          </Switch>
          <Switch>
            <PrivateRoute exact path="/dashboard" component={Drawer} />
          </Switch>
          <div className="Content">
            <Switch>
              <PrivateRoute exact path="/dashboard" component={Dashboard} />
            </Switch>
          </div>
        </div>
</Router>

тогда у меня есть sidedrawer, у которого есть такая NavLink, и он отлично перенаправляет

<NavLink to="/dashboard/table">
  <Description className={classes.icon} />
</NavLink>

и затем у меня также есть в Dashboard.js строка, подобная этой

<Switch>
      <Route
        exact
        path={`${this.props.match.url}/table`}
        component={DataTable}
      />
</Switch>

когда я щелкаю по иконке в боковой панели, он должен перенаправить в / dashboard / table и отобразить компонент DataTable, но он просто перенаправляет и ничего не отображает.

Answer 1

Попробуйте использовать withRouter hoc в компоненте, это решит вашу проблему. Примерно так:

import { withRouter, Router } from 'react-router-dom';
cosnt MyComponent = () => {
  return (<Router>
    <App />
  </Router>)
}
const App = () => {
  return (...all other routes)
}
export default withRouter(App);