React-router 不渲染组件

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>

然后我有一个侧边抽屉，它有一个像这样的 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);

React-router 不渲染组件

React-router not rendering the component

reactjs

react-router-dom