Как работают роуты в Remix
В Remix используется роутинг на основе файловой системы. Внутри папки с роутами каждый файл представляет собой отдельную страницу. Внутри каждого файла есть несколько экспортов. Дефолтный эскпорт - это React компонент, а специальные методы Remix экспортируются по имени. Среди таких экспортов может быть получение данных loader или мутация action.
В Remix можно создавать общий шаблон для страниц:
├───/apps
│ ├───/routes
│ │ ├───/posts // компоненты постов
│ │ └───posts.jsx // это шаблон
В файле posts.jsx используется Remix компонент <Outlet />, который вместо себя рендерит вложенные компоненты, как в react-router.
├───/apps
│ ├───/routes
│ | └───/users
│ | ├───$userId.edit.jsx
│ | ├───$userId.jsx
│ │ └───$.jsx
Для создания динамического роута необходимо начать имя файла со знака $. Чтобы получить название параметра в компоненте нужно использовать хук: const { userId } = useParams().
Также можно определять дополнительные сегменты пути роута через точку. Теперь компонент $userId.edit.jsx будет открываться по пути /users/{{user-id}}/edit.
Если нужно создать роут, который бы открывался по любому пути, нужно создать файл с названием $.jsx. Тогда, если нет подходящего роута по данному URL, будет открываться $.jsx.
www.smashingmagazine.com/2022/03…ystified
