Блог

Я пытаюсь сделать что-то вроде этого

 <Switch>
    <SomeNavBar>
        <Route path="page1">Page 1</Route>
        <Route path="page2">Page 2</Route>
        <Route path="page3">Page 3</Route>
    </SomeNavBar>
    <OtherNavBar>
        <Route path="admin">Admin Page</Route>
    </OtherNavBar>
</Switch>
 

Где у меня есть компонент-оболочка для маршрутов, которые не являются страницей администратора.

Однако маршрут администратора не отображает Admin Page , он просто отображает пустую страницу. Другие маршруты работают нормально.

Есть ли способ добиться такого поведения?

В вашем примере есть пара проблем, не связанных с вопросом, который вы должны исправить прежде всего.

Во-первых, прямые дочерние элементы a Switch всегда должны быть Route or Redirect — он не знает, что делать с любым другим элементом, и просто отобразит первое, что увидит (в вашем случае, SomeNavBar компонент). Во-вторых, path объявления должны предваряться косой чертой, чтобы маршрутизатор мог их правильно построить /page1 /admin , например, so и .

Учитывая это, вот несколько надуманный пример того, как добиться нужного вам поведения. Для страниц мы проверяем список возможных фрагментов перед рендерингом SomeNavBar и правильный маршрут. Обратите внимание также на exact параметр — это значит, что мы также не сопоставляем пути, которые начинаются только с указанного фрагмента, например /page1foo :

 <Switch>
  <Route exact path={['/page1', '/page2', '/page3']}>
    <SomeNavBar>
        <Route path="/page1">Page 1</Route>
        <Route path="/page2">Page 2</Route>
        <Route path="/page3">Page 3</Route>
    </SomeNavBar>
  </Route>
  <Route path="/admin">
    <OtherNavBar>
      Admin Page
    </OtherNavBar>
  </Route>
</Switch>