Question

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

但是问题是当我在前面的路径中设置prop`exact = {true}时找不到此/servicePanel/fileManagerDashboard路径

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

并且当我在上述路径中未设置精确= {true}时，/servicePanel/fileManagerDashboard会在同一页面上同时呈现/servicePanel路径组件和下方的/fileManagerDashboard路径组件

Answer 1

鉴于您不想在/servicePanel/fileManagerDashboard上呈现ServicePanel组件，则需要重构路由以在与/servicePanel/fileManagerDashboard相同的级别上添加/servicePanel

您的路线看起来像

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

和ServicePanel组件将仅包含链接

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

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

1 个答案: