反应路由器不渲染路径组件

Question

I my app.js我已将路线定义为：

<PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} />

在我的ServicePanel.js中，我有一个链接：

<Link to={`${this.props.match.url}/fileManagerDashboard`}>
    <i className="glyphicon glyphicon-cog"></i>
    File Manager
</Link>
<Switch>
    <PrivateRoute path={`${this.props.match.path}/fileManagerDashboard`} component={Dashboard} />
</Switch>

但问题是，当我在aboue path中设置prop'确切={true}时，找不到这个/servicePanel/fileManagerDashboard路径

<PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} />

当我没有在上面的路径中设置exact={true}时，/servicePanel/fileManagerDashboard在同一页面上呈现/servicePanel路径组件及其下方的/fileManagerDashboard路径组件

Answer 1

考虑到您不想在/ServicePanel/fileManagerDashboard上呈现ServicePanel组件，您需要重构路由，以在/ServicePanel/fileManagerDashboard的相同级别添加/ServicePanel/fileManagerDashboard

你的路线看起来像

<Switch>
      <PrivateRoute exact={true} path="/servicePanel" component={ServicePanel} />
      <PrivateRoute path={`${this.props.match.path}/fileManagerDashboard`} component={Dashboard} />
</Switch>

服务面板组件将只包含链接

<Link to={`${this.props.match.url}/fileManagerDashboard`}>
    <i className="glyphicon glyphicon-cog"></i>
    File Manager
</Link>