#инструмент дня

Поскольку парни из React Router продолжают творить странное (например, они объединили React Router и роутер проекта Remix 🤮, вы теперь ставите оба), да и вообще как-то много себе позволяли на своём пути, всегда интересно посмотреть на альтернативы.

Одной из таких вполне может быть wouter: https://github.com/molefrog/wouter

+ Небольшой размер
+ На хуках
+ Тайпскрипт
+ Компонент верхнего уровня <Router/> — необязателен вообще, это значит гибкость в использовании во всех местах
+ Очень похож на RR по набору компонентов

Пробуем? Альтернативы?

#react #router #wouter

#фишка дня

Кому немного зла, близкого к абсолютному? :)

Как превратить вообще все ссылки в вашем проекте в управляемые вашим роутером? В нашем случае, либо Next.js либо react-router. Да очень просто: https://gist.github.com/devongovett/919dc0f06585bd88af053562fd7c41b7

На скриншоте есть ошибка, кто найдет — возьмет с полки пирожок.

Но если я такое увижу в новом проекте... не надо :) Это крайний случай.

#react #router #hack

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

Восстановление скролла теперь поставляется из коробки! И умеет гораздо больше, чем просто скроллить наверх. Правда, требует изменения корневого роутера. Благо, это несложно.

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

По-моему, очень круто. И хорошо, что решение официальное.

#react #router

#ссылка дня

Всеобъемлющее руководство по созданию приложения адресной книги от создателей React Router: https://reactrouter.com/tutorials/address-book

Клиентский и серверный рендеринг, фильтрация данных, добавление. И даже немного о кодах ответов.

Для полноценного приложения останется добавить только работу с базой данных :) Но... не здесь.

Прекрасный туториал, начинающим и тем, кто ещё не знаком с реакт-роутером или некоторыми его аспектами должно очень зайти.

#react #router #ssr #tutorial

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

Восстановление скролла теперь поставляется из коробки! И умеет гораздо больше, чем просто скроллить наверх. Правда, требует изменения корневого роутера. Благо, это несложно.

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

По-моему, очень круто. И хорошо, что решение официальное.

#react #router #бородач