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

Question

我的应用程序.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 路径中设置 prop 'exact={true} 时找不到这个/servicePanel/fileManagerDashboard路径

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

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

Answer 1

鉴于您不想在/servicePanel/fileManagerDashboard上渲染 ServicePanel 组件，您需要重构路由以在与/servicePanel相同的级别添加/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>