Реагировать маршрутизатор не рендеринг компонента пути

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>

, но проблема в том, чтоэтот /servicePanel/fileManagerDashboard путь не найден, когда я установил реквизит `точное = {истина} в пути

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

и когда я не установил точный = {истина} в указанном выше пути, /servicePanel/fileManagerDashboard отображает как /servicePanel компонент пути, так и ниже него /fileManagerDashboard компонент пути на той же странице

Answer 1

Учитывая, что вы не хотите отображать компонент ServicePanel на /servicePanel/fileManagerDashboard, вам необходимо провести рефакторинг маршрутов, чтобы добавить /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>