Размер React Router вырос в 3 раза

[@t1mee]

Ого React-router СНОВА все переосмыслили и теперь уже точно поняли как оно должно выглядеть

[@popuguytheparrot_]

И снова получилось говно

[@Nini-sv1bd]

ждем 7 версию :) будет один хук который принимает массив из компонента и урла

[@lastremnant22]

Разборы актуальны, пили еще! Спасибо за видео!

[@ИванИванов-б7с8с]

разбор актуальный, жду продолжения!👍

[@ИванИванов-у3ч4м]

Отличный контент, как обычно. Спасибо большое

[@trendsgallery]

лучший видос про современный router, спасибо

[@kspshnik]

Супер круто, спасибо!

[@mrzipapupa]

Всё супер, очень жду продолжения )

[@markavdeev2132]

Очень актуальны и полезны такие разборы. Спасибо за труды)

[@it-sin9k]

на днях выйдет следующее видео в этот же плейлист)

[@mediavova407]

Спасибо! В ожидании продолжения

[@OleksiiIhorovych]

Спасибо за обзор, Александр, ждём продолжения!) Очень актуально, так как раз неделю назад начал новую аппликуху делать и увидел что прилетел react-router-dom 6.6.1. До этого на 5м было несколько проектов. Так что сейчас тоже разбираюсь с новшествами) Инициализация роута стала больше напоминать подход в Angular. Также появилась сущность Outlet, что тоже намекает) В общем, там много интересного:)

[@it-sin9k]

Да-да, я тоже как раз очень погрузился во все это) я так понял, чтобы понять, почему в эту сторону вообще все движется, нужно еще Remix изучать)

[@ПавелВоробьёв-ю2ы]

Аааа, вы просто супер! Субтитры очень-очень четкие, просто никак не могу нарадоваться, вы помните еще мой коммент! Огромное спасибо, прошу очень так же продолжить в дальнейшем! Огромное спасибо!

[@it-sin9k]

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

[@fuad2069]

Да конечно хотим дальнейший разбор

[@TheTexPro]

Отличный контент, как обычно. Спасибо большое! разбор актуальный, жду продолжения!

[@hihoho1578]

всё что нужно знать о миграции с 5 на 6 версию на проекте который в разработке 2+ года и работает 4 человека. это 50 часов миграции. я 10 раз подумаю брать ли этот роутер в будущие проекты

[@evisotskiydev]

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

[@it-sin9k]

Ага, я тоже уже все прочел, чтобы на следующее видео нормально насобирать инфу)

[@s0k010v]

пакет очень широко используемый, поэтому дальнейший разбор весьма-весьма полезен.Как всегда спасибо за ролик!

[@andreisemianiuk4921]

Как раз перед твоим видео начал изучать доку новой версии) поэтому жду продолжения обязательно!

[@it-sin9k]

уже следующее видео активно в печи готовится)

[@nikolaykasparov8387]

Ждём продолжения 🙌

[@669pain]

Комментарий в поддержку! Жду нового выпуска по обновленному роутеру!

[@alderman9414]

В районе 6.3 разрабы библиотеки выпилили у себя компонент Prompt, пришлось искать варианты написания своего аналога с использованием уже depricated navigator.block. Но в 6.4 они пошли дальше и выпилили navigator хотелось бы увидеть твою реализацию Propmt

[@it-sin9k]

Да, надо будет подумать)

[@ultraduck100]

значит мне еще повезло, что хоть навигатор был 😅

[@khmilevoi]

Посмотри в сторону UNSAFE_NavigationContext

[@alderman9414]

@@khmilevoi смущает UNSAFE, который в будущем может разделить судьбу navigator

[@AlexKrupko]

На самом деле все просто. Создаем свою копию BrowserRouter с собственным инстансом navigator и экспортируем его. Далее все как и раньше, используем navigator.block где нужно без привязки к всяким UNSAFE_ импортам.

[@bollgade]

Отличный ролик, не знаю как, но дал мне понимание, что я на правильном пути

[@muhamadaminibragimov5096]

Отличный контент спасибо

[@TravinskiyVladislav]

Спасибо в очередной раз за полезные видео

[@grenadier4702]

Когда сидишь на нексте и уже забыл про эту библиотку Кстати, а зачем менять-то было? 🤔Все уже и так привыкли, да и удобно было

[@mykhailostepanishchev6472]

Спасибо очень интересно, react router 6.4

[@stwebbox5691]

На данный момент версия react-router 6.8.2 и в офф доке в туториале показывается всё через createBrowserRouter(). Скажите, возможно ли писать роутинги на данной версии библиотеки как раньше через , , ? И где смотреть доку и офф туториал? У них на сайте можно выбрать доку либо текущей версии 6.8.2 либо 4-5 Мне просто нужно в доку и туториал подсматривать, потому что я не писал на версиях до 6.4, а на проекте сейчас не хотим использовать нововведения с createBrowserRouter() с ее лоудерами/экшенами

[@it-sin9k]

Привет :) Технически возможно все написать через BrowserRouter, но я подозреваю, что это будет тот еще гемор. Вероятно самый простой путь сейчас это использовать createBrowserRouter, но не использовать некоторые фичи типа Form, loader и т.д.

[@artyomtaranenko2267]

TanStack Router - ждём))

[@kimanowka]

Использовал handle для отображения хлебных крошек в header, сработало очень круто)

[@it-sin9k]

А можно по подробнее?)

[@kimanowka]

@@it-sin9k была задача сделать в header Хлебные крошки для навигации между страницами ( Каталог / Машина / Audi) по клику можно было вернуться на нужную нам старницу

[@kimanowka]

@@it-sin9k а из loader можно забирать params со страницы, что тоже нужно было в хлебных крошках

[@it-sin9k]

@@kimanowka т.е. вы всю хлебную крошку хранили так же и в url? в каком либо виде? а не handle это значит вы передавали снаружи. А откуда вы брали инфу?

[@kimanowka]

@@it-sin9k а потом в самом компоненте header брали эти crumbs согласно доки и получали нужный нам массив из этих вложенных страниц, мы тоже переделывали из 6 на 6,4 и некоторая вложенность на страницах была неправильная, но если сделать правильную вложенность в самом createBrowserRouter , то на выходе мы получаем массив из вложееных элементов, которые передавали в crumbs

[@ЕвгенийКутовой-й6ы]

разбор интересен! ждемс =) каждый раз, с роутером, как. в первый

[@it-sin9k]

ага) полностью согласен)

[@deanArtDev]

Спасибо за видео! Используем в проекте версию 6.4.1. Пока не юзали action, loader etc. В остальном полет нормальный, проблем не доставляет. По личным ощущениям, код стал больее выразительный в сравнении с 5 версией

[@it-sin9k]

6-ая версия мне тоже понравилась) без новых фишек 6.4 версии)

[@paultmatik]

с errorElements у нас на проектах возникли проблемы. Мы использовали ErrorBoundry для оборачивания компонентов, чтобы красиво показывать ошибки только для тех компонентов с которыми эти ошибки связаны. С 6.4 роутера errorElements просто перехватывает все ошибки, то есть пользователь видит отдельную страницу на которой красуется сообщение об ошибке, не очень хорошо. Но поскольку не критично пока не разбирались как это поведение отключить или настроить

[@it-sin9k]

Хороший поинт) постараюсь осветить его в видео про errorElements, там есть про что рассказать) Спасибо за комментарий!

[@zluka4636]

здравствуйте. Покажите как теперь передавать параметры в роутах и как их принимать в классовых компонентах. Спасибо.

[@it-sin9k]

насчет классовых компонентов, они предлагают делать HOC в виде функционального компонента, который достанет все из ххуков и пробросит в сам компонент :)

[@zluka4636]

@@it-sin9k Как по мне костыльно получается. И четается плохо, но просто в реализации

[@it-sin9k]

@@zluka4636 согласен, не хотят они о классах больше думать))

[@denistatarinov5395]

Как всегда круто и актуально! Спасибо синяк, когда уже мерч будет ??

[@it-sin9k]

Какой мерч хотелось бы?)

[@denistatarinov5395]

@@it-sin9k Худи)) майки))

[@it-sin9k]

@@denistatarinov5395 Сложность их самая большая как их продавать) сайт то ли заказывать где то с платежками, то ли что) пока идей нет даже как это лучше замутить) Если есть опыт или идеи, буду рад выслушать)

[@maxgib2489]

Ура, спасибо тебе за контент! Вместе с твоими видео я стану хорошим спецом

[@izzy7541]

Использую в своём пет-проекте их новый подход в их же фреймворке Remix run (видимо там и зародилась их идея с таким подходом) и мне очень понравилось. Теперь почти на 100% можно избавится от стейт менеджера. Данные с лоадера страницы можно получить на любой вложенности. Работа с формами тоже крутая, теперь можно использовать обычный html стандарт для форм. Конечно тут вопрос что лучше, куча джс и нагрузка памяти клиента или зависимость от интернет соединения для запросов. Вечный холивар В целом идея ок. Меня радует что в теории при таком подходе можно разгрузить зоопарк библиотек на проекте и получить крутой DX для себя и лёгкий клиент для пользователя

[@it-sin9k]

А может знаете, где они описывали мотивацию создания loader и других вещей. Так как у меня пока немного противоречивые ощущения) А нагуглить нигде не могу :( Видемо надо Remix либу изучать)

[@antonnizhegorodov9465]

Как я понял они взяли такой подход с react-location

[@it-sin9k]

@@antonnizhegorodov9465 Надо будет посмотреть)

[@izzy7541]

@@it-sin9k Да, у Ремикса на сайте в блоге есть статья Remix vs Next. Там в одном из разделов есть аргументация в пользу выбора подхода с формами.

[@it-sin9k]

@@izzy7541 обязательно поищу эту статью

[@egorovsa]

Давно уже юзаю 6ую версию и в ней прекрасно описывается через JSX без createBrowserRouter, вместо switch используется routes ну и правила другие описания роута, куда адекватнее чем а 5ой версии. Очень классно как всё работает описал в своем ролике давным давно academind, Советую посмотреть. Описание роутов в виде конфига на мой взгляд дермо и 3 шага назад, было выпилено в 4ой версии, а 3ей так и писали. Никогда такого не было и вот опять. Вся еще ботва в том, что реакт-роутер стал слишком много на себя брать, так вот основной фичей 6.4 стала возможность префечв данных. Т.е роутер теперь еще и на дуде игрец.

[@it-sin9k]

Пока у меня схожие ощущения)

[@bondarenkode]

Согласен. Такое ощущение, что Router стремится стать отдельным фреймворком JS)))

[@dmitrygopro5550]

Top content ❤

[@alexeysvetlenko2217]

Использую только jsx/tsx нотации. повсеместно юзаю. Так глубоко не копаю как ты - "некогда точить пилу, нужно пилить дрова". Спасибо тебе - после каждого твоего видео иду разбираться исходники.

[@it-sin9k]

спасибо за добрые слова) в следующих видео пройдусь по основным фичам) чтобы время тебе не тратить)

[@jamjam3337]

спасибо!👏

[@RustemmKh]

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

[@Ramosok]

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

[@it-sin9k]

Привет :) Уже был подобный вопрос под этим или вторым видео, где вы тоже комментарий оставили. Идея в том что Header должен быть внутри роутера const router = createBrowserRouter([{ element: path: '/', children: [{ element: index: true, }, { element: path: '/cars' }]) const LayoutWithHeader = () => { return ( ) }

[@Ramosok]

@@it-sin9k Спасибо большое!

[@Shark956]

Привет, было бы круто пройтись по всем фичам, спасибо ☺️

[@it-sin9k]

Активно готовится новое видео)

[@alcor9921]

Почему в element нельзя передать JSX, а именно ReactNode?

[@DreamingDolphing]

Эту библиотеку колбасит из стороны в сторону с каждым обновлением. Многие программисты перестали её использовать. Я для небольших проектов использую wouter.

[@it-sin9k]

Я уже сам задумываюсь отказаться от нее)

[@bi_zi]

Жду новые ролики по роутеру

[@dushnilas]

жду продолжения

[@Patr56rus]

В доке есть хорошие примеры по использованию новых фич. Например рекомендуют использовать handle для построения breadcrumb.

[@it-sin9k]

Вы уже не первый кто говорить про breadcrumbs) пока не видел этот пример)

[@botanik-lena]

Саш, спасибо))

[@ArtyemSavchenko-rus]

errorElement не только 404 перехватывает, если выкинуть ошибку throw во вложенном компоненте, тоже отобразится наш not found.

[@it-sin9k]

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

[@jasminasamanbetova8928]

я посмотрела свой и оказывается у меня версия 6.11.2. С тех пор прошло 4 месяца

[@Илья-ж8ч8о]

Актуально)

[@webStandard1151]

У меня есть вопрос, может быть кто-то знает. У меня есть есть определённый роутер который я создал через createRoutesFromElements В конечном итоге я получаю Но мне необходимо сделать чтобы была примерно следующая структура: Нужно сделать так, чтобы TopMenu и LeftMenu имели доступ к контексту Роутера, иначе я не могу использовать И получаю ошибку вроде "Error: useHref() may be used only in the context of a component" Если кто знает как решить данную проблему, помогите, пожалуйста)

[@webStandard1151]

Кажется разобрался: нужно использовать Outlet

[@it-sin9k]

Привет :) Такого рода вещи делаются с помощью вложенных роутов. const router = createBrowserRouter([{ element: // ниже описал компонент path: '/' children: [{ element: index: true, }, { element: path: 'cars' }] }] const Layout = () => { return ( )}

[@webStandard1151]

​@@it-sin9k Спасибо!

[@КотМатроскин-х9ь]

я бы хотел узнать больше

[@deantek]

сижу на 6.3, пока полет нормальный, смысла переходить на новые пока не вижу, раньше на 5 версии очень нравилось, что можно было делать path с регулярными выражениями, жаль, что в новых версиях это выпилили

[@it-sin9k]

У них в доке кстати расписывалось, как они ожидают работу с регулярками. Читал на днях)

[@deantek]

@@it-sin9kо, это уже интересно, надо будет глянуть, спасибо

[@alexanderkomanov4151]

У себя перешел га новую версию. Использовал loader и заменил в компонентах useState() и useEffect(). Очень удобно.

[@it-sin9k]

Использовали defer в loader?

[@alexvoid8717]

Возможно как-то задиспатчить санку в loader-функции?

[@it-sin9k]

@@alexvoid8717 только если явно вытащить инстанс стора и сделать store.dispatch(...). Боюсь, что это не очень хорошо работает в паре с Redux

[@Maximurz1k]

Так и до ангуляре дойдем, ждемс

[@it-sin9k]

ага)) сам пока не знаю как на это реагировать)

[@Maximurz1k]

@@it-sin9k я жду активно. свичнулся с ангуляра в реакт изза рынка, плююсь до сих пор, но радуюсь что ангуляр и сюда доходит, правда с опозданием на 5-10 лет

[@it-sin9k]

@@Maximurz1k ))) я свичнулся еще с 1 ангуляра на реакт много лет назад) и надеялся, что больше его не увижу))))

[@Ramosok]

🎉

[@vitalij.nykyforenko]

С беглого взгляда стало похоже на TanStack Router. React Router слишком часто все меняют, хорошо что последнее время использую роутинг от next.js

[@it-sin9k]

Тоже устал от breaking changes :)

[@sk89061]

🔥🔥🔥

[@MrRiseful]

Хорошо, что я на ангуляре

[@alexeyfilippov42]

я до последнего буду сидеть на 6.0 удобно и понятно

[@it-sin9k]

обратная совместимость с 6.0 не сломана) вы просто можете не использовать новые фичи :)

[@semninrussia]

Хоть использовал react один раз 2 года назад, твои видео всё равно смотрю...

[@it-sin9k]

Спасибо за поддержку!)

[@HandsomeRoman]

больше такого контента! компонент Redirect удалили. мнн пришлось написать его

[@it-sin9k]

о кстати не обратил на это внимание о_О

[@SanoTheLitch]

Проп index - это пометка для дочернего роута, что тот будет отрисован по дефолту в Outlet при условиях: - Урл совпадает с родительским - Урл не совпадает ни с одним другим дочерним роутом (помимо помеченного index) Проп hasErrorBoundary не совсем понятен - в коде это просто флаг, указывающий, что errorElement проброшен и он устанавливается автоматически, походу забыли выпилить, либо оставили для каких то стремных кейсов, но в бою реальных юзкейсов не вижу. Проп handle - да, похоже используется для проброса каких то данных, но смысл не ясен, т.к. есть loader, но обнаружена следующая улика из исходников хука useMatches /** * Returns the active route matches, useful for accessing loaderData for * parent/child routes or the route "handle" property */ Проверять лень - юзкейса опять же нет

[@SanoTheLitch]

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

[@it-sin9k]

я как раз вчера в доке дочитал до примера с index)

[@SanoTheLitch]

@@it-sin9k в общем девизы нового роутера: - Лоудеры и экшоны мана небесная, теперь очень похоже на флоу react-query (хотя последний я недолюбливаю) - Хуки матчинга и работы с урл-параметрами - очень неплохо - Съезжаем с JSX в пользу TS, ибо декларативность !== удобство в таких фундаментальных вещах (но можно было бы и побольше API открыть для управления из TS-кода для любителей экстрима) - Очень рекомендую присмотреть утилиту generatePath для навигации со сменой path-параметров, можно достаточно легко и красиво дополнить стандартные хуки - Ну а сами стандартные хуки более-менее описаны и полезны. По итогу получился стандартный роутер уровня Angular или Vue 3-4 летней давности XD

[@it-sin9k]

@@SanoTheLitch Мне кажется они там и вдохновляются))

[@SanoTheLitch]

@@it-sin9k ну а чего бы нет...осталось в реакт притащить адекватный шаблонизатор и будет сказка XD

[@2009Spread]

похож на на роуты ангулара

[@zhenia14]

Я всё ещё в ожидании видева, что передаётся по ссылке, а что по значению...

[@it-sin9k]

Не вопрос, kzbin.info/www/bejne/Y5mle61ohbV8jKc

[@zhenia14]

@@it-sin9k ну и халтура от тебя, жаль что ты так и не разобрался что передаётся по ссылке, а что по значению.

[@Dimazzz_ik]

Надеюсь, что это такой рофл

[@grenadier4702]

@@zhenia14 чел, ты...

[@chum2470]

Контент хорош, а сам роутер еще то говно

[@Mikjagger1]

все видео актуальны, ньюсмэйкер)

[@xeleos]

Не опять, а снова

[@romanmed9035]

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

[@it-sin9k]

Я думаю они не перешли к 7-ой версии по причине, что они не ломали обратную совместимость. Т.е. с 6.6 версией можно работать как с 6.0 и все будет ок :) так что не все так плохо)

[@romanmed9035]

@@it-sin9k не ведь если установлена версия 6.1 и ее обновить до 6.6 придется переделывать как минимум роуты. да, это проще и в меньшем объеме чем у других библиотек, но все равно переделывать и заметно. или я не внимательно смотрел видео?

[@it-sin9k]

@@romanmed9035 хз, надо смотреть исходники

[@d1mas1k2KA]

На реальном проекте, решил перейти на новую версию роутера, в итоге нифига не понял и откатился обратно)

[@it-sin9k]

да, тут очень много всего))

[@EnjoyerOfBepis]

React-router всегда был ужасен. Никогда не понимал его популярности. JSX-роутинг крайне неудачная идея, всегда лучше единая точка истины в виде конфига. В версии 6.0 наконец-то догадались до идеи транзитивности роутов, что смена роута не должна быть синхронным процессом, на который реагируют сами компоненты, а сам роутер должен запускать эти эффекты и управлять ими. Но все равно сделали, извините, через жопу. Где состояние транзакции? Где удобное управление им? Раньше была отличная библиотека router5, но, к сожалению, уже умерла. Сейчас вроде неплохо выглядит react-location от создателя react-query. Надеюсь, React-router поскорее умрет. Раковая опухоль в мире реакт разработки, как и redux.

[@it-sin9k]

Если не секрет, какой ваш любимый стек?)

[@EnjoyerOfBepis]

@@it-sin9k Спасибо за вопрос) Прям любимого нет, но сейчас выбрал бы react + apollo или react-query для сетевого кеша, react-location в качестве роутера и в зависимости от проекта recoil или zustand в качестве стейт-менеджера. Если стейт-менеджер будет использоваться очень активно (а с библиотекой сетевого кеша он почти и не требуется) и нужна высокая производительность, выбрал бы recoil, иначе zustand.

[@it-sin9k]

@@EnjoyerOfBepis На многое из вашего списка планирую в будущем еще сделать свои обзоры и поделиться мнением по этому поводу)

[@EnjoyerOfBepis]

@@it-sin9k о, с удовольствием бы посмотрел ваш обзор, у вас лучший русскоязычный канал по фронтенду.

[@it-sin9k]

@@EnjoyerOfBepis Спасибо :) Постараюсь добраться обязательно)

[@popuguytheparrot_]

Реакт роутер вообще конченная библиотека для роутинга. Мне нужно было на большом проекте перевести с 5 версии на 6. Я сделал подготовку по гайду, и начал обновлять на 6 версию. Такой взрывной рост ошибкой и кривого поведения я еще не встречал. Поэтому теперь команду ремикса я вижу как мошенников отмывающих венчурные деньги Если хотите библиотеку для роутинга смотрите в сторону tanstack/router

[@RealToptuK]

А не подскажите причины необходимости миграции на 6 версию?

[@popuguytheparrot_]

@@RealToptuK приложение требовало новые фичи для управления экранами