React-router 不渲染组件

Modri 发表于 Dev

蓝色的

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

在我的 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>

当我单击 sidedrawer 中的图标时，它应该重定向到 /dashboard/table 并呈现 DataTable 组件，但它只是重定向并且不呈现任何内容。

皮尤什·扎拉尼

尝试在组件中使用 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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。