Как работать с несколькими макетами в приложениях ReactJS
Приложение с разными макетами - обычное дело. Предположим, у нас есть приложение с двумя макетами: main layout и dashboard layout.
В этом случае мы должны каким-то образом указать нашему приложению, чтобы оно отображало правильный вид для определенного URL / страницы. Я думаю, что лучше всего поместить логику в Router. Давайте сначала создадим обычный роутер с react-router. Должно получиться так:
Теперь давайте изложим нашу логику. Нам нужно создать слегка модифицированную версию <Route /> компонента react-router. Я назову это <AppRoute />
AppRoute принимает компонент как обычно Route. Но также он принимает layout, который будет либо main layout, либо dashboard layout.
Теперь мы можем обновить наш Router новым AppRoute компонентом.
Последняя вещь. Нам нужно создать два макета, которые мы использовали выше.
При таком простом подходе у нас может быть столько макетов, сколько нам нужно.
Спасибо за прочтение!
