Прежде чем говорить о декларативной маршрутизации, давайте рассмотрим наиболее распространенный подход к маршрутизации, который многие фреймворки внедряли в течение многих лет.
Как вы думаете, что общего у двух следующих файлов?
Обе реализации (.NET и PHP) сопоставляют некоторый URL-адрес / путь к файлу, который будет запускать некоторый код (контроллер AKA). Еще у них есть общая черта: вся маршрутизация размещается и загружается до того, как приложение что-либо отрендерит.
Совместное размещение
Совмещение всей маршрутизации нарушает принцип совместного размещения. Совместное размещение широко принято как лучшая практика большинством сообщества React. Идея совместного размещения заключается в том, что вы должны группировать вещи по интересам, а не по реализации. Например, вместо того, чтобы хранить весь CSS в папке, мы размещаем CSS вместе с компонентами, которые относятся к конкретному CSS. Вместо того, чтобы помещать все запросы GraphQL в одну папку, мы размещаем их вместе с компонентами, о которых идет речь. Поэтому маршрутизация не должна быть исключением.
Другие фреймворки, такие как Rails, Express, Ember и Angular, следуют тому же подходу, что и примеры .NET и PHP, показанные выше. Зачем нам группировать все маршруты одинаково?
Совместное размещение кода упрощает сопровождение кодовой базы приложения.
Статическая маршрутизация
React Router до версии 4 следовал тому же принципу, что и реализации .NET и PHP, показанные выше. Он сохранил сопоставление между путем и компонентом в отдельном файле. Пример:
Затем вы можете импортировать файл маршрутизации где-нибудь в верхней части дерева компонентов:
Представьте себе приложение Messenger для аутентифицированных пользователей. Дерево компонентов могло бы выглядеть так в React Router ‹версии 4:
Этот подход называется статической маршрутизацией, вы заранее объявляете свои маршруты, а затем импортируете их на верхний уровень.
Динамическая маршрутизация в React Router версии 4
Рассматривая предыдущее приложение Messenger, если мы используем декларативную маршрутизацию, такую как React Router версии 4, то дерево компонентов будет выглядеть так:
Мы совмещаем маршрут с компонентом, который нужно отрисовать. Этот подход называется динамической маршрутизацией, он выполняется во время рендеринга приложения, а не в отдельном файле конфигурации.
Пример из реального мира
Представьте, что вы хотите реализовать маршрутизацию для следующего приложения Messenger. Обратите внимание, что эта страница является главной страницей с подробностями. Это означает, что когда вы выбираете данную тему с пользователем, эта конкретная беседа отображается вместе с потоками.
Следующие розовые области - это части, которые будут общими для всего приложения, независимо от URL-адреса:
Путь «/ messages» отобразит следующий компонент Threads:
Когда пользователь переходит по пути «/ messages /: username», он отображает как компонент «Темы», так и компонент «Беседа» данного протектора:
Дерево компонентов может выглядеть примерно так, как показано на следующем рисунке. Учитывая URL-адрес http: // localhost: 3000 / messages / superuser23, приложение не будет отображать компонент входа в систему (учитывая, что пользователь вошел в систему). Вместо этого он будет отображать и потоки, и компоненты разговора.
Совет
Если вы хотите успешно использовать React Router 4 и декларативный подход, который использует React, вам следует реализовать динамическую маршрутизацию в React.
Распространенная ошибка, которую мы видим у разработчиков, которые плохо знакомы с React, но имеют опыт работы с другими фреймворками и инструментами, заключается в том, что они пытаются привнести известные им ментальные модели, даже если эти модели не подходят должным образом. В некоторых случаях (не всегда) эти модели не подходят для React; маршрутизация - один из таких случаев. Если вы обнаружите, что размещаете все свои маршруты в одном месте (например, в файле конфигурации маршрутизации) в приложении React, подумайте о совместном размещении компонентов Route в дереве, где они естественным образом встанут на свои места.
Эта статья является частью обучающего материала ReactJS.Academy.
