Добавление хуков в React Router v4
response-route-hook позволяет использовать хуки onEnter, onLeave и onChange
TL; DR: Если вы хотите использовать библиотеку напрямую, вы можете перейти в репозиторий github и прочитать документацию. Ниже приводится краткое описание мотивации написания этой библиотеки.
Новая библиотека React Router полностью изменила парадигму. Привыкнув к статической маршрутизации, адаптация получилась немного грубой, но ее преимущества были быстро оценены. Декларативная маршрутизация не только дала нам свободу принятия решений, но и стала более понятной благодаря тому, как мы привыкли создавать компоненты React.
Нам не нужно писать какую-либо конфигурацию вне нашего приложения, вместо этого Routes - это просто компоненты, которые отображаются в нашем пользовательском интерфейсе в зависимости от местоположения нашего URL. И это, будучи простыми компонентами, возвращает нас к философии React, согласно которой мы можем писать, повторно использовать и составлять компоненты, использующие маршруты.
Действительно наглядный пример этого можно увидеть в документации React-Router, где он создает PrivateRoute, оболочку, которая отображает aRoute или Redirect в зависимости от того, аутентифицирован пользователь или нет. Этот пример действительно заставил меня полюбить новую парадигму React Router.
Но было кое-что, что мне показалось странным. Те, кто пришел из React-Router v3, использовали хуки как onEnter onChange и onLeave для, например, отправки действий в наш магазин или выполнения вызовов нашего API. Эти хуки были полностью стерты в новом React Router, и причины казались правильными.
Эти хуки были просто оболочкой для существующих функций. Они были просто заменой крючков жизненного цикла компонента. onEnter заменил componentWillMount, onChange был componentWillReceiveProps и onLeave выполнил цель componentWillUnmount.
Но это доставило мне проблему. Мои презентационные фиктивные компоненты, которые были подключены к моему хранилищу redux, теперь должны были быть классами React только для отправки действий при их загрузке. Мои функции без состояния нужно было превратить в классы, которые не содержали никакого состояния, чтобы использовать их крючки жизненного цикла. Это просто сделало мои компоненты менее пригодными для повторного использования.
Еще одно решение, которое я придумал, заключалось в том, чтобы написать контейнер для каждого компонента, который мне нужен для отправки действий. Это позволило мне отделить логику от фиктивных компонентов. Но теперь я просто создавал классы, которые использовали только хуки жизненного цикла и всегда отображали только один компонент. Эта работа была действительно однообразной.
Поэтому я решил вернуть к жизни старую утилиту React-Router 3. RouteHook - это просто оболочка для хуков жизненного цикла контейнера, который будет выполнять функции, которые мы передаем ему в качестве свойств, когда маршрут отображает компонент.
react-route-hook использует преимущества новых Route возможностей композиции для создания простого компонента, который позволит нам использовать хуки в наших маршрутах и сохранить наши фиктивные компоненты такими, какими они должны быть.
