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

👇 Разверни для полной информации

Новый синтаксис пакета 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

[qnhbnkg]

Какраз вчера первый раз в жизни в процессе обучения столкнулся с React-router-dom в видосе 2019 года... пришлось гуглить, а сегодня видео это. Очень в тему.

[danber]

Ещё убрали exact, очень важная информация которую пропустил

[disposables]

Только сегодня переделывал на 6ю версию))) Хороший урок, всё понятно. Жаль мало инструментов и ситуаций разобрано из всего что есть. Хотелось бы пошире и посложнее ситуации)))

[apsolution]

Уррраа!)) Додумался сам, гуглил, но ваше решение с удовольствием посмотрю;)

[SeliverstovMusic]

После добавления Navlink элемент ссылка на '/' всегда содержит класс active. Не могу понять, почему

[aleksprimetv]

О как раз роутинг на проекте собирался на 6v переводить) кстати path="*"(no match) и до этого был такой синтаксис

[romanmed]

отличное описание и без всякого мусора

[MrVIPKent]

Дякую за цікаве та корисне відео, так тримати

[riseofkingdoms]

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

[maxamax]

вопрос. мне нужно что бы обновилась вся страница полностью. типа что бы hedar тоже исчез был только about(к примеру). это как сделать?

[novichoknovichok]

Спасибо! Очень помогло в освоении роутинга!

[tgbjvui]

хороший урок, вопрос а как заменить Redirect

[Pagegift]

Спасибо, отличный урок!
Скажите, а можно код на обыкновенном JavaScript вставить в React App?

[Obraveliss]

видео полезное, но я искал почему у меня после изменений в jsx вёрстке, сайт не обновляет только если не вручную через f5, можете дать наводку, за видео спасибо

[Amourphys]

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

[maga_frank]

14:40 странно что у меня когда <Header /> был выше <Routers /> сайт работал нормально, и когда перенес хедер внутрь роутес то ничего не показывало

[disposables]

Кстати странно что не ругается у вас на exact. Мне написал что в 6й версии его нету, и приложение падало пока не удалил.

[PUNISHER-udpz]

Несказанное обновление: теперь не работает запись необязательного параметра - path='/chats/:chatsId?'

[ogaaness]

помогите пожалуйста все перепробовал выдает ошибку TypeError: Object(...) is not a function, прошу помочь пожалуйста

[sergeyvladimirov]

Нихрена у меня не сработал линк. Не знаю почему.