Вложенные маршруты с React Router v4/v5

Вложенные маршруты позволяют создать иерархическую структуру для навигации внутри вашего приложения React. В React Router v4 и v5 этого можно добиться с помощью компонентов и .

Пример

Рассмотрим следующий пример, в котором мы хотим разделить наше приложение на внешний интерфейс. и административные области.

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

Соображения

В React Router v4 вы не вкладываете компоненты . Вместо этого вы помещаете их в другой . Например:

Должно стать:

А компонент Topics будет определен следующим образом:

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

Эта структура обеспечивает большую гибкость и контроль над маршрутизацией вашего приложения.