Тёмный

React-router-dom 6 - новый синтаксис роутинга. Routes вместо Switch, elements. SPA и MPSa на RRD6 

WebDev с нуля. Канал Алекса Лущенко
Просмотров 33 тыс.
50% 1

🔥 Курс ReactJS: itgid.info/course/reactjs
⏰ Курс JavaScript 2.0: itgid.info/course/javascript-2
👇 Разверни для полной информации
🧠 Чат Telegram c мозголомками : t.me/itgid_info
💎 Курс Функции в JavaScript: itgid.info/course/function-2021
🧑🏻‍💻 Сайт: itgid.info
😋 Курс Методы массивов: itgid.info/course/arraymethod
Новый синтаксис пакета react-router-dom версии 6. Замена switch - routes, замена component на element. Изменение в error (404) навигации, создание SPA и MPA сайтов на react router-dom 6, использование useLocation вместо match, создание активных ссылок в навигации с помощью Link, NavLink
00:00 Обновление react-router-dom 6
01:00 Установка 5 версии react-router-dom
04:15 Установка 6 версии RRD (Switch is not exported from)
07:00 Обновляем Switch - Route, component - element
09:40 Страница 404
10:30 useLocation вместо useRouteMatch
12:40 SPA в React, Link
17:10 Активная навигация в React, NavLink
Моя рабочая станция:
Desktop: AMD Ryzen5 1600,Asus GeForce GTX 1650 Phoenix 4GB GDDR6, RAM: 16GB, Motheboard: MSI A320M PRO-M2 V2, Power: Chieftec Value APB-400B8 400W Bulk, Box: Gougar MX350 Mesh
HDD:
- Samsung 860 Evo-Series 500GB M.2
- Toshiba P300 2TB
- Silicon Power A56 256GB
Monitors:
- 23.8" Dell P2419HC
- 23.8" Dell P2418D
Mouse: Trust Verto Ergonomic Wireless
Keyboard: HP KU-1469
Microphone: Samson C01U Pro
+ MacBook Pro M1 13'' 8-Core CPU/8-Core GPU/16-core Neural Engine /16GB/256GB
+ IBM Lenovo ThinkPad E14 / Intel Core i5-1135G7 (4.2 ГГц) / RAM 16 ГБ / SSD 1 ТБ / Intel Iris Xe Graphics

Опубликовано:

 

7 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 48   
@user-qn3hb4nk6g
@user-qn3hb4nk6g 2 года назад
Какраз вчера первый раз в жизни в процессе обучения столкнулся с React-router-dom в видосе 2019 года... пришлось гуглить, а сегодня видео это. Очень в тему.
@disposables72
@disposables72 2 года назад
Только сегодня переделывал на 6ю версию))) Хороший урок, всё понятно. Жаль мало инструментов и ситуаций разобрано из всего что есть. Хотелось бы пошире и посложнее ситуации)))
@apsolution4722
@apsolution4722 2 года назад
Уррраа!)) Додумался сам, гуглил, но ваше решение с удовольствием посмотрю;)
@danber1893
@danber1893 2 года назад
Ещё убрали exact, очень важная информация которую пропустил
@romanmed9035
@romanmed9035 Год назад
отличное описание и без всякого мусора
@novichoknovichok310
@novichoknovichok310 Год назад
Спасибо! Очень помогло в освоении роутинга!
@alexforos5425
@alexforos5425 Год назад
Спасибо! Многое пояснили 👍
@andryr814
@andryr814 2 года назад
Классное видео! Спасибо
@Amourphys
@Amourphys 2 года назад
Спасибо вам огромное, у вас суперский контент, вы мне очень помогли👍 С меня лайк и подписка
@tevi6667
@tevi6667 2 года назад
Вы лучший давно искал это_)
@aleksprimetv
@aleksprimetv 2 года назад
О как раз роутинг на проекте собирался на 6v переводить) кстати path="*"(no match) и до этого был такой синтаксис
@MrVIPKent
@MrVIPKent 7 месяцев назад
Дякую за цікаве та корисне відео, так тримати
@user-vs7tr2ns3c
@user-vs7tr2ns3c Год назад
Cпасибо, помогло
@vd7533
@vd7533 2 года назад
СУпер!
@Grigoren_com
@Grigoren_com Год назад
спасибос!)
@riseofkingdoms6183
@riseofkingdoms6183 Год назад
Спасибо мужик очень выручил, я как раз только закончил бек на ноде, и тут начал фронт и попал на этот синтаксис уже думал не получится а тут такой ролик попался!
@AbdullohIzzatullayev-sw7dz
@AbdullohIzzatullayev-sw7dz 6 месяцев назад
спасиба очен памог
@Pagegift
@Pagegift 2 года назад
Спасибо, отличный урок! Скажите, а можно код на обыкновенном JavaScript вставить в React App?
@user-tg3bj1vu9i
@user-tg3bj1vu9i 2 года назад
хороший урок, вопрос а как заменить Redirect
@Obraveliss
@Obraveliss 2 года назад
видео полезное, но я искал почему у меня после изменений в jsx вёрстке, сайт не обновляет только если не вручную через f5, можете дать наводку, за видео спасибо
@maxamax5695
@maxamax5695 Год назад
вопрос. мне нужно что бы обновилась вся страница полностью. типа что бы hedar тоже исчез был только about(к примеру). это как сделать?
@disposables72
@disposables72 2 года назад
Кстати странно что не ругается у вас на exact. Мне написал что в 6й версии его нету, и приложение падало пока не удалил.
@SeliverstovMusic
@SeliverstovMusic Год назад
После добавления Navlink элемент ссылка на '/' всегда содержит класс active. Не могу понять, почему
@SeliverstovMusic
@SeliverstovMusic Год назад
Нашел. Досаточно добавить end:
@alexforos5425
@alexforos5425 Год назад
@@SeliverstovMusic Спасибо!
@user-fy7pv5cc7c
@user-fy7pv5cc7c Год назад
Дякую
@maga_frank
@maga_frank Год назад
14:40 странно что у меня когда был выше сайт работал нормально, и когда перенес хедер внутрь роутес то ничего не показывало
@PUNISHER-ud5pz
@PUNISHER-ud5pz 2 года назад
Несказанное обновление: теперь не работает запись необязательного параметра - path='/chats/:chatsId?'
@ogaaness
@ogaaness 2 года назад
помогите пожалуйста все перепробовал выдает ошибку TypeError: Object(...) is not a function, прошу помочь пожалуйста
@SeverHolod
@SeverHolod 2 года назад
Гугл переводчик попробуй использовать. Ты пытаешься вызвать объект, а не функцию
@Теаниныч
@Теаниныч 2 года назад
даже хрень как решил?
@asbelous
@asbelous 2 года назад
MIntяра рулет!
@virtuoz-ru
@virtuoz-ru 2 года назад
У него винда. То картинка минта.
@sergeyvladimirov9994
@sergeyvladimirov9994 2 года назад
Нихрена у меня не сработал линк. Не знаю почему.
@City__Walker
@City__Walker 2 года назад
Самое забавное что на сайте нигде, так как редиректит на страницу 5 версии
@ibrohimfattohov5280
@ibrohimfattohov5280 2 года назад
useHistory don't working
@karapet9annnn
@karapet9annnn 2 года назад
И ещё, exact убрали, НАКОНЕЦ-ТО!
@user-fi9tn1pr4m
@user-fi9tn1pr4m 2 года назад
patchname и до этого был
@giorgikiladze1151
@giorgikiladze1151 2 года назад
ni hrena ne ustanovilos
@virtuoz-ru
@virtuoz-ru 2 года назад
Vue двигается меньше кода, больше функционала. Реакт больше не нужного кода с тем же функционалом. Такое ощущение, что они сами говорят: бросайте реакт, дальше будет только хуже.
@crawd9296
@crawd9296 2 года назад
ну как бы нам нравится,тебе не нравится?не пользуйся!
@virtuoz-ru
@virtuoz-ru 2 года назад
Всё таки по сравнению с Vue, react полное говно. Тонны ненужного непонятного кода. Никакой структуры, как хочу так и пишу. После чего получается не проект, а куча говно-кода.
@taras.batura
@taras.batura 2 года назад
Ты этот вывод сделал по урокам для новичков?)
@virtuoz-ru
@virtuoz-ru 2 года назад
@@taras.batura Нет, 2 года назад. Затем всё время подтверждаю. И каждый раз такое мнение: какие же остолопы работают с этой недобиблиотекой.
@aleksprimetv
@aleksprimetv 2 года назад
@@virtuoz-ru просто проблема в тебе, это ты не догоняешь.
@virtuoz-ru
@virtuoz-ru 2 года назад
@@taras.batura Причём здесь уроки для новичков. Ты структуру кода видишь, что всё в перемешку: html, css, javascript. Посмотри как всё организованно во Vue, angular.
@Polite_person_
@Polite_person_ 2 года назад
@@virtuoz-ru дело вкуса, с появлением хуков и переходом на функциональные компоненты реакт тоже хорош
Далее
ПОЮ ЛЕТНИЕ ПЕСНИ🌞
3:16:55
Просмотров 1,7 млн
Уроки по JavaScript |  Функция eval
3:46
Просмотров 2,9 тыс.
Параметры в ссылках в React Router 6
11:40