Очень часто, когда вы создаете приложение с маршрутизацией, чтобы иметь какой-то общий дизайн с состоянием между маршрутами. Например, боковая панель или некоторый информационный контент, например, вошел в систему пользователь или текущее время. Обычно это обрабатывается макетами, которые обернуты вокруг содержимого нашего маршрута. Очень важно, чтобы макет сохранял свое состояние и не отображался повторно при изменении маршрута.
В этом простом и кратком руководстве я покажу вам, как вы можете управлять своей маршрутизацией в React с помощью React Router и макетов, которые сохраняют свое состояние и не перерисовываются при навигации по маршруту.
Если вы хотите проверить пример кода полностью, загляните в этот StackBlitz или посмотрите мой репозиторий на Github.
Давайте сначала определим компоненты, которые мы будем использовать для каждой страницы. Мы будем делать их такими простыми, как одна строка кода на компонент. Просто для примера.
Теперь давайте определимся также с нашими макетами. У нас будет два макета. На первой и второй страницах будет использоваться первый макет, а на третьей и четвертой страницах будет использоваться второй макет.
Наши макеты будут отображать только простой заголовок для примера, а также специальное свойство children, которое будет брать содержимое между открывающим тегом макета и его закрывающим тегом и предоставлять его в функции макета как это точное свойство - children.
Подробнее об особом свойстве children можно прочитать в официальной документации React о Состав против наследования здесь.
Теперь осталось определить сами маршруты.
Самая важная часть здесь - это наш RouteWrapper компонент, который является просто абстракцией для нашего Route. Мы передаем ему component и layout, а затем просто оборачиваем компонент в наш макет. Здесь важно использовать свойство render для Route, чтобы иметь макет, который поддерживает его состояние и не перерисовывается при навигации по маршруту.
Посмотрите полный пример кода на StackBlitz или посмотрите мой репозиторий на Github. Более подробный пример приложения можно найти в моем React Auth w / Firebase Github repository.
Заключение
Мы создали макет для наших разных страниц, который не меняет своего состояния и не перерисовывается при навигации по маршруту. Вы можете продолжить и протестировать результаты, добавив какое-либо состояние или просто поиграв с componentDidMount функцией жизненного цикла компонентов Layout, чтобы увидеть, что они просто монтируются один раз, когда вы обращаетесь к странице с ними, а затем они не перерисовываются при навигации. на другую страницу с тем же макетом.
Не стесняйтесь комментировать и делиться своими идеями и предложениями! Спасибо за чтение 🙏
