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

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ก.ย. 2024
  • Разбираемся в преимуществах новой версии 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
    ✔️ Если хочешь изучать программирование со мной, не забудь подписаться :)
    www.youtube.co....
    ✔️ Мой телеграм канал: t.me/joinchat/...
    #reactrouter #reactrouterdom #reactrouter6 #реактроутер #реактроутердом #wisejs

ความคิดเห็น • 100

  • @wisejs
    @wisejs  2 ปีที่แล้ว +64

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

  • @romanpohribniak8471
    @romanpohribniak8471 2 ปีที่แล้ว +6

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

  • @allagorynich4932
    @allagorynich4932 2 ปีที่แล้ว +14

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

    • @tuRistst
      @tuRistst 2 ปีที่แล้ว +3

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

    • @yankov2206
      @yankov2206 ปีที่แล้ว +1

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

    • @Nopefish
      @Nopefish 11 หลายเดือนก่อน

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

    • @Nopefish
      @Nopefish 11 หลายเดือนก่อน

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

  • @max_mgtow
    @max_mgtow 2 ปีที่แล้ว +3

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

  • @АлинаЧередниченко-п9ъ
    @АлинаЧередниченко-п9ъ 2 ปีที่แล้ว +1

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

  • @deikun95
    @deikun95 2 ปีที่แล้ว +8

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +2

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

  • @woodDacha
    @woodDacha 2 ปีที่แล้ว +1

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

  • @mykhailostepanishchev6472
    @mykhailostepanishchev6472 2 ปีที่แล้ว +1

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +1

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

  • @nvrnGrek
    @nvrnGrek 2 ปีที่แล้ว +1

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

  • @АзимАзимов-с6н
    @АзимАзимов-с6н 2 ปีที่แล้ว

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

  • @yodgor585
    @yodgor585 ปีที่แล้ว

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

  • @AGM140580
    @AGM140580 2 ปีที่แล้ว +1

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

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

  • @user-cx5ry5tt6s
    @user-cx5ry5tt6s 2 ปีที่แล้ว +1

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

  • @oneivanone
    @oneivanone 2 ปีที่แล้ว

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

  • @Commondore
    @Commondore 2 ปีที่แล้ว

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

  • @cartfpv4610
    @cartfpv4610 2 ปีที่แล้ว +3

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +1

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

    • @Илья-с1л6э
      @Илья-с1л6э 2 ปีที่แล้ว

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

    • @cartfpv4610
      @cartfpv4610 2 ปีที่แล้ว

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

    • @ReAgent003
      @ReAgent003 2 ปีที่แล้ว

      @@Илья-с1л6э какую альтернативу предлагают юзать?

    • @Илья-с1л6э
      @Илья-с1л6э 2 ปีที่แล้ว

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

  • @АнатолийГорбов-о1ь
    @АнатолийГорбов-о1ь ปีที่แล้ว

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

  • @Zego92
    @Zego92 2 ปีที่แล้ว

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

  • @timur-mut
    @timur-mut 2 ปีที่แล้ว

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

  • @raff_m_d6971
    @raff_m_d6971 2 ปีที่แล้ว

    От души

  • @adamburke4496
    @adamburke4496 2 ปีที่แล้ว

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

  • @СергейКузнецов-э4я2я
    @СергейКузнецов-э4я2я 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

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

  • @victormog
    @victormog 2 ปีที่แล้ว +2

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

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

    • @victormog
      @victormog 2 ปีที่แล้ว +1

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

  • @Veremey
    @Veremey 2 ปีที่แล้ว

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

  • @ReAgent003
    @ReAgent003 2 ปีที่แล้ว

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

  • @LEG1ONER
    @LEG1ONER ปีที่แล้ว

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

    • @LEG1ONER
      @LEG1ONER ปีที่แล้ว

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

  • @ikazak
    @ikazak 2 ปีที่แล้ว

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

  • @indigosay
    @indigosay 2 ปีที่แล้ว

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

  • @ДаниилСоболев-щ4щ
    @ДаниилСоболев-щ4щ 2 ปีที่แล้ว

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

  • @BlueCell
    @BlueCell ปีที่แล้ว

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

  • @thekamol
    @thekamol 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

      Darcula Darker Theme

  • @АлександрДми
    @АлександрДми 2 ปีที่แล้ว

    👌

  • @denisputnov
    @denisputnov 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

      path=“*”

  • @i_help_you
    @i_help_you 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +1

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

    • @indigosay
      @indigosay 2 ปีที่แล้ว

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

  • @ReAgent003
    @ReAgent003 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +1

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

  • @singlebw4065
    @singlebw4065 2 ปีที่แล้ว

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

  • @CTILET
    @CTILET 2 ปีที่แล้ว

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

    • @CTILET
      @CTILET 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

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

  • @Potato-h2w2s
    @Potato-h2w2s 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

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

    • @Potato-h2w2s
      @Potato-h2w2s 2 ปีที่แล้ว

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

  • @user-cx5ry5tt6s
    @user-cx5ry5tt6s 2 ปีที่แล้ว

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

  • @antonsmolin7351
    @antonsmolin7351 2 ปีที่แล้ว

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

  • @mercury_2379
    @mercury_2379 2 ปีที่แล้ว

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

  • @alexforce-yq8st
    @alexforce-yq8st 9 หลายเดือนก่อน

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

  • @champ__champ
    @champ__champ 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +1

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

  • @olezhonnv3215
    @olezhonnv3215 2 ปีที่แล้ว

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

  • @topsportsevents6014
    @topsportsevents6014 2 ปีที่แล้ว +2

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +2

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

  • @javlonbekxotamov6552
    @javlonbekxotamov6552 2 ปีที่แล้ว

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

  • @РегимРагимов
    @РегимРагимов 2 ปีที่แล้ว

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

  • @vladosk-lv6kp
    @vladosk-lv6kp ปีที่แล้ว

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

  • @haykabrahamyan7881
    @haykabrahamyan7881 ปีที่แล้ว

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

  • @Romul3003
    @Romul3003 2 ปีที่แล้ว

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

  • @kipiwpartner
    @kipiwpartner 2 ปีที่แล้ว +1

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

  • @mishaholovachko1643
    @mishaholovachko1643 2 ปีที่แล้ว

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว +1

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

  • @CeoRoman
    @CeoRoman 2 ปีที่แล้ว

    exact для кого?

  • @chessclub92
    @chessclub92 ปีที่แล้ว

    spasibo

  • @СергоАвдонькян
    @СергоАвдонькян 2 ปีที่แล้ว

    хотим

  • @TheProfessionalGambler
    @TheProfessionalGambler 2 ปีที่แล้ว

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

  • @ИгорьГолуб-н6щ
    @ИгорьГолуб-н6щ 2 ปีที่แล้ว

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

  • @oleksiimoskin7903
    @oleksiimoskin7903 2 ปีที่แล้ว +6

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

    • @wisejs
      @wisejs  2 ปีที่แล้ว

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

    • @Nick-hq8of
      @Nick-hq8of 2 ปีที่แล้ว +1

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

  • @lukts7839
    @lukts7839 2 ปีที่แล้ว

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

  • @night_lovelll
    @night_lovelll 2 ปีที่แล้ว

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