Вложенный роутинг в React Router 6

Вложенный роутинг позволяет дополнительно организовывать подразделы на страницах, сохраняя общие части оформления и контента.
Код урока github.com/michey85/youtube-r...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

[@anazkomult]

Поигрался с новой версией react-router-dom, библиотека стала совсем конфетка, пользоваться одно удовольствие. Михаил, спасибо за уроки! Отличный канал по фронтенду, просто находка. :)

[@advhunter2]

Спасибо за курс, на x2 скорости пробежался, очень полезно 🔥😊

[@user-fs1pm5oe5s]

Супер, разжёвано, быстро, доступно. Спасибо огромное Вам!

[@d_r_robot]

Хочу выразить огромную благодарность за серию видео по роутам, пишу дипломный проект и если бы не вы , то я сам бы не разобрался! Успехов вам и добра!!!

[@aleksandrglebik8033]

Спасибо, Михаил! Ранее на udemy проходил Ваш курс: Компетенция Верстальщик - HTML, CSS, JavaScript, понравилось как излогали материал. Сейчас учу React и думаю много почерпну важных моментов о React в Ваших курсах на youtube.

[@rich_6585]

Спасибо за урок. На проекте понадобилась данная фишка, загуглил и сразу ваше видео нашёл)

[@baxa2277]

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

[@makssik7536]

Как же это все гениально. Гениально ПРОСТО!!!! Спасибо за подробное пояснение

[@user-rc1sy2us4m]

Огромное спасибо, контент супер. Остаюсь на вашем канале! Для меня еще ооочень много можно почерпнуть.

[@user-iy2hd6ix9j]

Супер!) Ждем встречи в следующих видео =)

[@CELTRIX88]

Самый подробный мануал про вложенный роутинг) Спасибо

[@christinal.4667]

Дай Бог тебе здоровья автор!)

[@alex45779]

Спасибо Вам за курс. Буду его пересматривать много раз. Нашел много нового для ceбя кроме Router v6....!!!

[@user-xq9zy5sl3h]

Дякую за контент! Мені дуже допомогло :)

[@dima_sand]

не успел ещё применить и полностью освоить материалы прошлого видео а уже новое. круто)

[@flogger2367]

Хорошее объяснение, подача и тембр голоса

[@FooFie2131]

Самый полезный и интересный канал из русскоязычного ютуба. В основном все ютуберы у которых более 100 к сабов уже скатились и стали снимать фуфловый контент. Ты красавчик!

[@mishanep]

Спасибо на добром слове =)

[@olehy5000]

🔥Просто огонь. Теперь мне нравится роутер)

[@Serhii_lolovich]

очень помогло! Узнал с видео про Outlet :)

[@_oxios_]

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

[@TpyrBo3Db]

спасибо за вложенные роуты, оч понятно

[@top-mma-news]

Круто приподносишь материал, спасибо)

[@dirty_arkady]

Хорошая подача материала!

[@astkh4381]

не подскажешь в каком урок он рассказывал про useMatche

[@user-ql2dh1xq9p]

Очень качественно!

[@velikorodnov1]

Видео бомба. Спасибо

[@maksymradchenko4889]

Как всегда на высоте !! Спасибо !!!!! А будут видео по практике react+ts ?

[@antonanton1206]

ВАаааааууууу пасиба Михаил

[@simongaming1118]

Жду урок с примером реализации breadcrumbs))

[@petrenckovilya]

Спасибо! ❤!

[@shirokirutsuga3840]

спасибо за видео, нашел решение для своей проблемы

[@rodyaolast8458]

божеееее, почему у такого годного канала так мало подписчиков? Чел спасибо тебе большое.

[@crypto_ninjas]

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

[@olga_ua]

Спасибо! )))

[@user-qj2yg1rn3j]

Спасибо!

[@user-ex3zx8ho1y]

какая же грамотная речь, я просто в шоке. Как у Тамары Гительман. Вы окончили факультет литературы?

[@mishanep]

Факультет Прикладной информатики :)

[@crypto_ninjas]

Вложеный Routing React Router Routes React Router 6 Роутинг Вложеный Роутинг Реакт Роутер . Спасибо большое ! Я буду рекомендовать в соц сетях твой канал.

[@bacring4687]

красава

[@user-ps2ge3cc5r]

Супер

[@user-yn4kh7gu9f]

Здраствуйте, спасибо за разбор. Корректно ли указывать все ройты в одном компоненте (App), а не разносить их по отдельным компонентам, не усложняем ли мы себе работу в будущем для юнит тестирования?

[@artyomtaranenko2267]

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

[@mishanep]

Есть что-то подобное kzbin.info/www/bejne/n6fXk4V4es9_jZo но со старым роутером. Как раз после этого видео вышло обновление и я кинулся записывать данный цикл по роутингу.

[@benchik100]

thanks a lot

[@fnaticshy]

Спасибо, сэкономил время что бы не читать док! =)

[@SundyPlankTon]

А какой вариант реализации более предпочтителен? сваливать весь роутинг в условный App, или распределять по компонентам?

[@user-pm4fz1rn5q]

Михаил доброго времени суток! Возник такой вопрос а роуты лучше раскидывать в зависимости от компонента? Или лучше их помещать в app и делать вложенные роуты как в этом уроке? Это вопрос относится к построению роутов..... По другому звучит так роуты хранят в одном месте или раскидывают в зависимости от страниц?

[@user-hg4hf5xb3y]

к сожалению очень поверхностно, но неплохое дополнение к примерам из доки...

[@dmorrison_jim]

Это охуенно, спасибо!

[@AndranikArshakyan]

Вложенный роутинг в React Router 6

[@user-cu9vr9ve8m]

Можно ли сразу сделать активным Our Contacts, как только перейдём на About?

[@nagibbator4449]

Like

[@user-irinaais90]

Расскажите, пожалуйста, как писать вложенные роутеры по версии React Router 6.4 с помощью createBrowserRouter

[@enmaboya]

спасибо! и вопрос, есть ли способ использовать withRouter и useHistory в 6й версии? к сожалению имею часть работать Shopify App Bridge React, а оно завязано именно на history

[@mishanep]

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

[@pavelbero5208]

Огромное спасибо за курс! Вопрос: А что стало с возможностью передавать в route массив: ?

[@mishanep]

Да, массив так мы передать не можем. Есть не самый удобный вариант через проп children stackoverflow.com/questions/67286660/how-to-make-path-for-and-home-in-react-router-v6

[@firemanhood1526]

00:08:00 чтоб ссылка оставалась активной это нужно через customLink делать или можно как то сразу в navLink условия писать (end, to)?

[@user-dm7lh3jj2h]

Привет, подскажи если разобрался в этом вопросе

[@alexanderkameo4809]

🤩🤩🤩🤩🤩🤩🤩🤩🤩

[@maga_frank]

Кто знает можете подсказать, как добавить компонент внутри которого есть эти самые роуты?

[@abumuhammad8356]

Привет. Как называется плагин, которым вы пользуетесь, который выделяет область работы?

[@mishanep]

Не очень понимаю о чем речь.

[@vladimirplyukhin5234]

Михаил, привет! Не могу разобраться, а как сделать переход на вложенный роут и скрол по ссылке как было бы при ? Может подскажешь, пожалуйста, или какую-то статью скинешь)

[@mishanep]

Попробуйте доп библиотеку react-router-hash-link

[@ilyatemnikov9624]

Михаил, доброго времени суток. Подскажите пожалуйста, а как можно сделать так, что при переходе на about, нас автоматически редиректело на /about/team? можно ли так сделать средставами react Router?

[@mishanep]

Можно. Но почему сразу не сделать адрес таким, какой нам нужен? Так-то есть редиректы, например.

[@vadimniziev5489]

Расскажите пожалуйста еще про lazy loading в 6 версии роутера)

[@mishanep]

Есть риск, что эта часть довольно скоро поменяется)) React 18 должен переработать концепцию ленивых компонентов, поэтому можно опять опубликовать сразу устаревшее видео)) А так в доке есть хороший пример stackblitz.com/github/remix-run/react-router/tree/main/examples/lazy-loading?file=src/App.tsx По сути вместо обычного импорта страниц, делается динамический: const About = React.lazy(() => import("./pages/About")); А в элементе он оборачивается в компонент Suspense И вся премудрость.

[@vadimniziev5489]

@@mishanep Спасибо за пример, его не хватало..можно оказыается целый блок с роутингом в ленивую загрузку засунуть, круто)) Тогда ждем ролик о нововведениях 18 реакта)))

[@roamnov]

Будет ли видео об run build? Не могу решить проблему с BrowserRouter(не грузит страницы), а с HashRouter все работает в билде

[@mishanep]

Не сталкивался с проблемами при обычной сборке. Собрал сейчас проект, запустил - всё четко. Там на SSR есть свои тонкости, но они тоже решаемы через StaticRouter.

[@TheTurbobarbitura]

Кейс. Есть два разных компонента: главная страница '/' и личный кабинет 'personalarea'. И там и там есть компонент панель навигации. Панель навигации, помимо основного контента, принимает в себя два компонента: 'вход/регистрация' и 'аватарка/выход', которые в свою очередь должны отображаться в зависимости от пути соответственно. Что бы я не писал в пути к этим компонентам отображается все равно вышестоящий (первый). Подскажите как пофиксить?

[@mishanep]

Когда нужна общая область для разных страниц, то используется вложенность, которой в вашем примере нет. Простей вариант с общей разметкой разбирается на видео про Layout kzbin.info/www/bejne/d6HJpauhjtOLmtE Это частный случай вложенного роутинга. Причем разные страницы можно объединять под разными лейаутами.

[@TheTurbobarbitura]

@@mishanep спасибо огромное! Видео помогло!

[@user-cm3gs5xb5q]

Подскажите пожалуйста, если ставлю теги Route, routes... и так далее, все правильно с вложеностью с импортами, только роуты пишу, пропадает вся инфа, белый экран и нету ошибок, что делать?

[@user-dz1uq5sd5b]

такая же история, разобрались?

[@melitopol_Russia]

есть кто-то из желающих вместе поучить реакт на практике?

[@_soryegeton]

1:40 "/" - решётка * Просто забавно получилось)

[@serhioramires3166]

Некорректный урок.