Как правильно маршрутизировать смесь родительских и дочерних маршрутов с помощью React Router

Question

Я пытаюсь поиграть с Reacter-Router, но сталкиваюсь с проблемами, когда начинаю вводить некоторые дочерние маршруты и заставляю их затем возвращаться к родительским маршрутам.

Я прикрепил ссылку на CodeSandbox ниже, которая содержит текущий код, если кто-нибудь может увидеть, где я ошибаюсь?

Я пытаюсь получить набор родительский и дочерний маршруты и разрешить маршрутизацию от родительского до дочернего и от дочернего -> родительского. В этом примере вы увидите, что дочерние маршруты не работают, но если вы перейдете прямо к higher_level_route, это будет работать.

https://codesandbox.io/s/compassionate-tdd-ynqdc?file= / пример. js

Answer 1

Здесь есть 3 проблемы.

1 - Как уже объяснялось, удалите exact prop, поскольку он предотвращает рендеринг CoreComponent.

2 - изменить путь ${path}/one на ${path}one во всех Route в CoreComponent. Вы можете зарегистрировать как path, так и url, чтобы увидеть, какое значение они на самом деле содержат. В вашей текущей ситуации значение пути //one, а значение ссылки /one. Таким образом, удаление sla sh заставляет все работать должным образом.

3 - Вам необходимо изменить порядок маршрута в компоненте RoutingApp. Поскольку Switch всегда отображает только один маршрут (т.е. первое совпадение), вам нужно сначала разместить /higher_level_route, а затем '/'.

<Router basename="/base/path">
  <Switch>
    <Route path="/higher_level_route">
       <HigherLevelComponent />
    </Route>
    <Route path="/">
       <CoreComponent />
    </Route>
  </Switch>
</Router>

Надеюсь, теперь это поможет.

Answer 2

Точный путь маршрута строго соответствует и не допускает / one и / two. Изменение точного пути на / * разрешает это. Мы можем удалить переменные path и url в адресе. https://codesandbox.io/s/exciting-dew-3xvgm?file= / пример. js