Question

我有一个嵌套的路由，它不呈现传递的组件。

在我的app.js中，我有一个像这样的路由器设置，并且一切运行正常

$1$2

然后我有一个侧边抽屉，它具有这样的NavLink，并且可以完美重定向

<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>

然后我在Dashboard.js中也有这样的一行

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

当我单击侧边抽屉中的图标时，它应该重定向到/ 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没有渲染组件

1 个答案: