Разбор Tanstack Router - убийца React Router

Показать описание

Посмотрим на возможности Tanstack Router, который сможет заменить React Router и разберём все его преимущества недостатки, а так же посмотрим как с ним работать.

🔗 Ссылки:
Промокод COURSESTOP на скидку 5%
💬 Telegram канал с полезными советами:

Разделы видео:
0:00 - Введение
0:12 - Установка
2:08 - Настройка роутинга
7:59 - Создание роутов
11:27 - Роуты с параметрами
16:39 - useParams и useSearch
20:14 - loader и обработка ошибок
23:57 - devTools
25:03 - Выводы
27:38 - Заключение

Комментарии

🔗 Ссылки:
Промокод COURSESTOP на скидку 5%
💬 Telegram канал с полезными советами:

PurpleSchool

Наверное, вместо Number(search?.page) ?? 1 должно быть Number(search?.page) || 1.

Так как если page не передали, то мы получим undefined, а Number(undefined) -> NaN, NaN ?? 1 -> NaN

nikita_belous

Чувак, ты чисто на волне передовых фронтенд технологий залетел с видосом про Tanstack 👏

gubatenkov

Привет, думаю если бы вы писали в обычном редакторе (vscode/webstorm) код воспринимался бы намного легче, а так спасибо за годный контент 🎉

bolovy

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

Фрукт-яп

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

ДмитрийРовер

Спасибо за видео, жаль про layout ничего не показал

Edgar-pulc

Спасибо, отличный обзор! 🤘
На будущее интересно увидеть было бы реализацию авторизации, хотя бы минимум и я пока не очень понял, используя эту либу надо ли нам ставить query, для запросов, или она так же хранит кэшем данные в себе и дополнительная либа уже будет лишней, нам хватит только router?

viktorkasap

А как его правильно с Tanstack Query подружить ?

data-center-project

У меня почему-то не генерируется файл .gen при npm run dev. Хотя плагин добавлен, может быть это потому что vite + electron + react отличается от vite + react просто. Плагин добавлен в конфиг рядом с плагином react()

d.sadykov

Молодой человек подскажи что за тема у тебя в nvim установлена ? Оч уж зашла

ananasios

Я единственный кто не увидел убийцу реакт роутера ?) видос просто не о чём)

llwebstylell

Спасибо за обзор. Подскажите, какой плагин отвечает за предложение вариантов кода (серым цветом), которое появляется при начале создания функции итд. Видел похожее поведение и в vscod.

ВасилийБрагин-сп

Не пон, а как обрабатывать загрузку? Я думал по логике танстака в компоненте в data мы должен получить данные и что то вроде isLoading рядом, а по факту ничего такого там нет, как по итогу спинер то показывать?

awenn

Дочерних роутов здесь нету? Как то не обнаружил как они работают, или может плохо искал

proletarian

Блокирующий лоадер - это не круто, конечно. Тема с типизированными роутами не нова, в RN такое есть (без учета фишки сопоставления файловой структуры, ну и в целом не под web заточено, понятное дело).
Хочу офтопнуть по Next 13: как сохранять состояние между запросами на серверные эндпойнты (которые /app/api/...)? Там файлы походу не постоянно крутятся, а чуть ли не как в php на каждый запрос вызываются. По крайней мере, console.log в импортируемом в хендлер запроса файле отрабатывает на каждый запрос. Ну и начальная инициализация там через одно темное место, какой-то точки входа нет, если экпериментальная фича положить функцию register в файл instrumentation.ts, типа там можно подобие бутстрапа организовать. Так вот, между запросами хочу хранить данные в памяти, а-ля сервис, который хранит/выдает массив с данными. И ничего не выходит. Т.е. данные можно только хранить на диске и оттуда каждый раз читать (а так как данные нужно иногда менять, то и писать). А хотелось бы в памяти, подумываю попробовать засорить своей переменной global ноды (уж она то должна постоянно крутиться, запросы ожидать), но это как-то кривенько (хотя если заработает, то и хрен с ним). И вообще, интересно, как Next эту свою черную магию делает - нагуглить, почему состояние не сохраняется между запросами не получилось, и пока не настолько отчаялся, чтобы ковыряться в исходниках.

CJIueHb

Спасибо, избавился от реакт роутера в пользу адекватного роутинга от tanstack

evoleurt

Спасибо за обзор! Но честно говоря видео получилось не рыба и не мясо. Для обзора слишком длинное для полноценного урока как-то не хватило объяснений зачем это нужно и чем это решение лучше существующих

bellmoon

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

P.S. работает только в YouTube

proletarian

На этом канале одни убийцы каждую неделю)

fedordostoevskiy