Как начать работу с React Router 5

Больше всего меня беспокоит работа с маршрутизаторами и состоянием маршрутов.

Думаю, я использовал большинство основных библиотек маршрутизаторов, которые существуют как для angular, так и для React. Они все ... плохие.

Некоторые сосут меньше, чем другие, и хитрость заключается в том, чтобы найти тот, который меньше всего причиняет вреда.

Мне нравится держать вещи отдельно. Знаете… разделение интересов и все такое. Не должно быть целых консалтинговых фирм, посвященных обучению организации правильному использованию маршрутизатора. Я смотрю на вас angular-router и react-router.

По этой и многим другим причинам я не согласен со статус-кво в отношении того, какую библиотеку маршрутизации выбрать. У меня тоже есть аналогичные причины моей неприязни к сокращению, но я не собираюсь сейчас вдаваться в подробности.

Несколько лет назад я наткнулся на другую библиотеку после некоторого времени, неохотно ища альтернативы ...

Маршрутизатор5

Нет лучшего способа описать это, кроме того, что создатели уже опубликовали в своих файлах readme. Итак, я просто скопирую / вставлю его дословно:

Router5 - это маршрутизатор, независимый от платформы и библиотеки просмотра.

  • разделение вида / состояния: router5 обрабатывает инструкции и выводит обновления состояния.
  • универсальный: работает как на стороне клиента, так и на стороне сервера.
  • просто: определите свои маршруты, начните прислушиваться к изменениям маршрута
  • гибкий: вы контролируете переходы и то, что происходит при переходах.

Просто ... чисто. И это помогает писать чистый код. Тем не менее, чтобы настроить его в первый раз, потребуется немного поработать ноги. Я помогу вам с этим здесь.

Честно говоря, я когда-либо использовал это только с React. Я не пробовал с angular, потому что, честно говоря, я не мазохист.

createRouter

Вот как все начинается. Создайте маршрутизатор с некоторой конфигурацией маршрута (подробнее об этом чуть позже), а затем запустите маршрутизатор.

Оберните ReactDOM.render методом router.start, а затем Provide маршрутизатор в приложение. Для этого он использует React Context API, если вы не знакомы с ним, я настоятельно рекомендую прочитать его.

Нам нужноbrowserPlugin, чтобы фактически изменить URL-адрес в браузере, поскольку router5 отвечает только за состояние вашего маршрута.

routeConfig

Конфигурация - это массив объектов, которые имеют эту базовую форму:

[
  {
    name: 'routeName',
    path: '/my/path',
  }
]

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

Вы можете видеть, что я добавил свойство component, почему позже станет ясно, почему. Также константа ROUTES - это просто объект объектов со строковыми свойствами. Выглядит это так:

Пути path-parser. Если вы знакомы с экспресс-доставкой, то сразу поймете это.

routeNode

Это компонент более высокого порядка (HOC), который обертывает ваш фактический компонент React и сообщает router5, что это именованный узел, к которому мы хотим иметь возможность выполнять маршрутизацию.

Как отрисовывать маршруты

Последний кусок головоломки - это розетка для роутера. Это можно сделать разными способами, вот как я это делаю.

getComponent util - это просто метод, который анализирует объект routeConfig и возвращает свойство component на основе имени маршрута, на котором мы находимся.

Поскольку useRoute - это перехватчик, React будет повторно отображать этот компонент при каждом изменении состояния маршрута.

Прелесть этой системы в том, что у вас может быть несколько вложенных выходов маршрутизатора для вложенных маршрутов. У вас даже могут быть родственные розетки, которые будут отображать разные компоненты в каждом. Вам просто нужно создать свои routerConfig и getComponent утилиты для поддержки этого.

Комплексная конфигурация

Как и было обещано, вот более сложный пример routeConfig.

Это реальный реальный пример, взятый из созданного мной приложения Meteor.

Этот пост едва ли начинает касаться того, на что способен Router5, но он должен, по крайней мере, дать вам достаточно информации, чтобы взяться за дело.