Как Новый React Router 6 решает все проблемы?

Разбираемся в преимуществах новой версии React Router 6. Из глобальных изменений:
1. Решена проблема порядка роутов с Route Ranking
2. Switch Переименован в Routes
3. Новый API Route
4. Вложенная маршрутизация
5. Index Route вернули
6. Новый хук useRoutes вместо react-router-config
7. Уменьшение размера: c 20kb до 8kb
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка!
👉 Поддержка канала: / wisejs
✔️ Если хочешь изучать программирование со мной, не забудь подписаться :)
kzbin.info/door/Oxq...
✔️ Мой телеграм канал: t.me/joinchat/RVq-cmt6n1SJRS7Z
#reactrouter #reactrouterdom #reactrouter6 #реактроутер #реактроутердом #wisejs

[@wisejs]

Нужно видео с миграцией v5 на v6 или приложение с использованием React Router 6?

[@user-ly7zn9fr6i]

Ждем.

[@katada]

По любому

[@user-qg3ef5ir8v]

В доке же норм описано

[@wisejs]

@@user-qg3ef5ir8v не спорю)

[@vavtomobile]

нужно )

[@user-xe7sp3pr7t]

Ура 🙌 новое видео. С возвращением! Да, было бы интересно посмотреть о миграции. Спасибо

[@romanpohribniak8471]

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

[@woodDacha]

Как всегда кратко понятно и по делу!!! :)

[@kipiwpartner]

Супер! Лучшее, что я видел по рутам v.6

[@oneivanone]

Спасибо за подробный выпуск! Подобного контента очень не хватает

[@topsportsevents6014]

Вчера посмотрел твои видео по typescript , многое прояснилось особенно с infer )

[@wisejs]

Круто! Рад, что помогло 🙃

[@max_mgtow]

Спасибо друг 🤝👍 Недавно столкнулся, когда изучал React. Делал всё по видео, но там была v.5, а npm загрузил latest version. В итоге пришлось чекать документацию и переписывать под v.6)) Лайк и подписка 🤘

[@yodgor585]

Спасибо, блага каналу

[@nvrnGrek]

как здорово ты разъяснил, спасибо

[@user-vm2db5cq1g]

Отличное видео, кратко и информативно

[@AGM140580]

Как всегда, контент на высшем уровне! У тебя талант.

[@wisejs]

спасибо огромное!)

[@allagorynich4932]

По первой проблеме: в 5 версии, чтобы route рендерился только при повторном совпадении path нужно добавить атрибут "exact"

[@tuRistst]

Тоже не вижу в этом проблемы. Этот параметр изначально в 5ой версии был.

[@yankov2206]

@@tuRistst какой блогер такой и контент

[@Nopefish]

Это не решает той проблемы что роуты надо в правильном порядке расставить

[@Nopefish]

​@@yankov2206не соглашусь, контент очень хороший

[@adamburke4496]

Спасибо за ролик!

[@user-qc1cn4dl8q]

Очень крутое видео, спасибо тебе огромное!!!

[@night_lovelll]

Лучший спасибо за ролики

[@ReAgent003]

спасибо за видео!

[@mykhailostepanishchev6472]

Спасибо,классное видео. React Router 6

[@wisejs]

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

[@Commondore]

Спасибо за видео, последняя фича в целом вообще меняет сам подход использования роутов в приложении :)

[@ikazak]

Ясно спасибо. Информативно и понятно

[@user-ds2fm3qy3w]

React-redux REACT React с нуля Спасибо бро! помог

[@timur-mut]

кайф, спасибо

[@user-so1bu9cw5g]

Привет! У тебя один из лучших каналов на ютюбе по js. Очень годный контент)))) Не забрасывай и к тебе придёт слава! Удачи! ///И много подписчиков тоже

[@wisejs]

Спасибо, приятно слышать)

[@deikun95]

разве exact не решает первую траблу?

[@wisejs]

Частично решает. В 6-й версии exact по дефолту = true.

[@Zego92]

Спасибо огромное На работе начали писать новую приложуху с нуля Вообще нихера не понятно Реально хоть и короткий видос но многое прояснил Определенно лайк

[@raff_m_d6971]

От души

[@oleksiimoskin7903]

Отличный ролик. У парня талант рассказывать просто и с примерами 👍🏼 Лучше пока во всем интернете не видел

[@wisejs]

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

[@Nick-hq8of]

насколько же huevo ты искал хаххахах

[@haykabrahamyan7881]

На 6го версии мне очень понравилось Layout

[@user-cx5ry5tt6s]

Бро го большой видос по nodejs (typescript) + react typescript , в Ютубе все делают на js(

[@TheProfessionalGambler]

еще бы добавить 😊

[@indigosay]

Про useSearchParams можете рассказать. Облегчает работу с query параметрами

[@user-cw6xh4nv9t]

👌

[@mercury_2379]

спасибо, дядь, ждем

[@user-vp7ht2fg1u]

Проблем не было. Проблем не решилось. Единственное адекватное в новой версии это нестинг роута родителя. Решалось и будет решаться через создание объекта константы routes где будут описаны все роуты приложения. Чтобы не дублировать что-либо пишем рекурсивную функцию для генерации и отдыхаем

[@user-gh5zf9ym1w]

хотим

[@chessclub92]

spasibo

[@vladosk-lv6kp]

я так понимаю ты так и не сделал гайд по миграции с 5 на 6?) вроде как есть офф гайд, но он очень краткий, хотелось бы подробный разбор

[@javlonbekxotamov6552]

проблема с V6 на TypeScript когда передаю компонент через Route, TS ругается на то что я не передаю пропсы

[@BlueCell]

Вторая проблема немного вітянута за уши, как по мне. В 5 роутере можно и просто как children передавать контент роута, тогда не так уж и много кода и пропсі можно прокинуть

[@lukts7839]

Было бы интересно приложение на 6-й версии)

[@LEG1ONER]

Подскажи лучше как сделать multiPath как это было в 5 и в начале 6 роутера

[@LEG1ONER]

как по мне, лично моё мнение 6 высер какой то, 5 лучше в разы, возможно что то со временем решится.

[@ReAgent003]

1) 10:43 это то же самое что и автоматический редирект с несуществующих роутов (типа '*') или нет? Если в адресной строке набрать рандомные числа, для которых мы не описали роут, нас будет перекидывать на компонент ? 2) 11:16 разве это не дублирование того, что ты говорил на 1:09 ?

[@wisejs]

1. В 6-й версии нас не будет перекидывать на Page т к роут не совпадет ибо exect сейчас как бы по дефолту true. 2. Не совсем, 1-й вариант задумывался о Route Ranking, второй о Index роутах.

[@singlebw4065]

Если можно выпусти видео как архитектурно грамотно использовать роуты 6й версии.

[@i_help_you]

Спасибо, а что сейчас вместо useHistory ? Откуда мы могли доставить хистори и делать разные пуши для переходов ?

[@wisejs]

useNavigate. Выглядит так: const navigate = useNavigate() navigate('/path')

[@indigosay]

useSearchParams перенял его часть функций

[@user-sz2qq4bz3r]

Привет, спасибо за инфу . Можешь показать как с этой новой версией сделать поисковик,

[@wisejs]

Что значит поисковик?)

[@user-sz2qq4bz3r]

@@wisejs ну как реализовать поиск по странице или живой поиск?

[@user-cx5ry5tt6s]

Го приложуху на новой версии)

[@Veremey]

Спасибі! Коли будуть нові відео? )

[@cartfpv4610]

Я не могу с них.... Во второй версии были адекватные иерархические руты. Надо было все сломать и подсадить всех на танцы с бубном, прокидывание путей, и запутанный рутинг внутри компонент. А сейчас "победоносно" возвращают то что работало 5 лет назад. И в этом весь фронтенд... Постоянные изменения и переписывание того что итак работает.

[@wisejs]

Это точно 😂 Как сами пишут: «Вернули все лучшее»

[@user-yw9wx4lv2w]

при чем тут фронтенд? это конкртено разрабы react-router такой фигней занимаются. В приличный обществах уже не рекомендуют вообще его использовать

[@cartfpv4610]

@@user-yw9wx4lv2w Редкая библиотека сохраняет свой апи и обратную совместимость на интервале 3-5 лет. При этом, будет делать +- то же самое.

[@ReAgent003]

@@user-yw9wx4lv2w какую альтернативу предлагают юзать?

[@user-yw9wx4lv2w]

@@cartfpv4610 редкая библиотека ломает апи полностью с каждой версией. То есть прям полностью! Ни одна версия не была совместима с предыдущей. Это полный бред, и как по мне говорит о полном непонимании авторов, о том в какую сторону им двигаться.

[@denisputnov]

Отличное видео, только не понял, как теперь 404 страницу рисовать?

[@wisejs]

path=“*”

[@victormog]

Три минуты на "проблему", для которой предусмотрен атрибут "exact"... Ну, а для тех, кто не внимательно читает документацию, можно конечно тасовать строки кода...

[@wisejs]

3 минуты на проблему которую создали сами разрабы введя неочевидное API

[@victormog]

@@wisejs Это, как говорится, не баг, а фича. Если бы стразу упомянуть об exact в 5-й версии, то и объяснение работы 6-й было бы проще - все роуты по умолчанию неявно содержат exact. IMHO, просто и понятно для тех, кто хочет перейти с 5-й на 6-ю.

[@antonsmolin7351]

Спасибо на Английский акцент)

[@thekamol]

Color theme of IDE какая у вас?

[@wisejs]

Darcula Darker Theme

[@CTILET]

Получается я вовремя начал изучать реакт редакс... подогнали упрощения

[@CTILET]

А неет, до 3 минуты понимал потом не понял

[@wisejs]

😂 Так бывает, вернись к видео позже)

[@CeoRoman]

exact для кого?

[@mishaholovachko1643]

4:38, 4 рядок "text: string" як називається цей extension, дякую

[@wisejs]

Всі плагіни за замовчуванням. Який саме це допонює - не скажу. Версія WebStorm - 2021.3.1, Build #WS-213.6461.79, built on December 28, 2021

[@Romul3003]

Про Outlet чого не розповів?)

[@champ__champ]

Короче реакт просто все слизал с vue )))

[@wisejs]

Реакт то тут при чем?) Реакт и Роутер разные люди пишут.

[@olezhonnv3215]

Почему реакт - это дичь? А посмотрите на роутер! Он изначально должен был такой быть! А не писать чепуху, а потом подпирать костыли костылями!

[@alexforce-yq8st]

Нахрена тебе гитара? Ты что, что то смыслишь в музыке? Или ты играешь на гитаре так же как произносишь английские слова?

[@user-ik4vu6rc2x]

Слух режет, когда ты пытаешься выговорить "рендер", "компонент" с английским акцентом🥴говори как все. Не вые*уйся. Даже Минин так не вые*ывается, со своими то знаниями