Вложенный роутинг в React Router 6
HTML-код
- Опубликовано: 25 ноя 2021
- Вложенный роутинг позволяет дополнительно организовывать подразделы на страницах, сохраняя общие части оформления и контента.
Код урока github.com/michey85/youtube-r...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
Супер, разжёвано, быстро, доступно. Спасибо огромное Вам!
Спасибо, Михаил!
Ранее на udemy проходил Ваш курс: Компетенция Верстальщик - HTML, CSS, JavaScript, понравилось как излогали материал.
Сейчас учу React и думаю много почерпну важных моментов о React в Ваших курсах на youtube.
Хочу выразить огромную благодарность за серию видео по роутам, пишу дипломный проект и если бы не вы , то я сам бы не разобрался! Успехов вам и добра!!!
Спасибо за курс, на x2 скорости пробежался, очень полезно 🔥😊
Поигрался с новой версией react-router-dom, библиотека стала совсем конфетка, пользоваться одно удовольствие.
Михаил, спасибо за уроки! Отличный канал по фронтенду, просто находка. :)
Самый полезный и интересный канал из русскоязычного ютуба. В основном все ютуберы у которых более 100 к сабов уже скатились и стали снимать фуфловый контент. Ты красавчик!
Спасибо на добром слове =)
Как же это все гениально. Гениально ПРОСТО!!!! Спасибо за подробное пояснение
Очень понятные ролики, продолжайте в том же духе. Желаю успехов в развитии канала
Спасибо за урок. На проекте понадобилась данная фишка, загуглил и сразу ваше видео нашёл)
Супер!) Ждем встречи в следующих видео =)
Огромное спасибо, контент супер. Остаюсь на вашем канале! Для меня еще ооочень много можно почерпнуть.
Самый подробный мануал про вложенный роутинг) Спасибо
очень помогло! Узнал с видео про Outlet :)
Дай Бог тебе здоровья автор!)
не успел ещё применить и полностью освоить материалы прошлого видео а уже новое. круто)
Спасибо Вам за курс. Буду его пересматривать много раз. Нашел много нового для ceбя кроме Router v6....!!!
Хорошее объяснение, подача и тембр голоса
Спасибо за урок!
Как всегда на высоте !! Спасибо !!!!!
А будут видео по практике react+ts ?
🔥Просто огонь. Теперь мне нравится роутер)
спасибо за вложенные роуты, оч понятно
Дякую за контент! Мені дуже допомогло :)
Круто приподносишь материал, спасибо)
Видео бомба. Спасибо
Очень качественно!
Спасибо! ❤!
Хорошая подача материала!
не подскажешь в каком урок он рассказывал про useMatche
Здраствуйте, спасибо за разбор. Корректно ли указывать все ройты в одном компоненте (App), а не разносить их по отдельным компонентам, не усложняем ли мы себе работу в будущем для юнит тестирования?
Спасибо!
ВАаааааууууу пасиба Михаил
Михаил доброго времени суток! Возник такой вопрос а роуты лучше раскидывать в зависимости от компонента? Или лучше их помещать в app и делать вложенные роуты как в этом уроке? Это вопрос относится к построению роутов..... По другому звучит так роуты хранят в одном месте или раскидывают в зависимости от страниц?
Спасибо! )))
спасибо за видео, нашел решение для своей проблемы
Жду урок с примером реализации breadcrumbs))
А какой вариант реализации более предпочтителен? сваливать весь роутинг в условный App, или распределять по компонентам?
Расскажите, пожалуйста, как писать вложенные роутеры по версии React Router 6.4 с помощью createBrowserRouter
Можно ли сразу сделать активным Our Contacts, как только перейдём на About?
Кто знает можете подсказать, как добавить компонент внутри которого есть эти самые роуты?
thanks a lot
божеееее, почему у такого годного канала так мало подписчиков? Чел спасибо тебе большое.
В комментариях упоминайте о чем информация в видео - так ютуб будет выдавать большему количеству человек именно этот канал
Михаил, доброго времени суток. Подскажите пожалуйста, а как можно сделать так, что при переходе на about, нас автоматически редиректело на /about/team? можно ли так сделать средставами react Router?
Можно. Но почему сразу не сделать адрес таким, какой нам нужен? Так-то есть редиректы, например.
какая же грамотная речь, я просто в шоке. Как у Тамары Гительман. Вы окончили факультет литературы?
Факультет Прикладной информатики :)
красава
Вложеный Routing React Router Routes React Router 6 Роутинг Вложеный Роутинг Реакт Роутер . Спасибо большое ! Я буду рекомендовать в соц сетях твой канал.
спасибо!
и вопрос, есть ли способ использовать withRouter и useHistory в 6й версии?
к сожалению имею часть работать Shopify App Bridge React, а оно завязано именно на history
Ни того, ни другого больше нет. WithRouter можно свой написать, в доке в faq показано как. Для истории сейчас useNavigate, который функцию путешествия по истории возвращает.
Супер
Огромное спасибо за курс! Вопрос: А что стало с возможностью передавать в route массив: ?
Да, массив так мы передать не можем. Есть не самый удобный вариант через проп children
stackoverflow.com/questions/67286660/how-to-make-path-for-and-home-in-react-router-v6
Привет. Как называется плагин, которым вы пользуетесь, который выделяет область работы?
Не очень понимаю о чем речь.
00:08:00 чтоб ссылка оставалась активной это нужно через customLink делать или можно как то сразу в navLink условия писать (end, to)?
Привет, подскажи если разобрался в этом вопросе
Кейс. Есть два разных компонента: главная страница '/' и личный кабинет 'personalarea'. И там и там есть компонент панель навигации. Панель навигации, помимо основного контента, принимает в себя два компонента: 'вход/регистрация' и 'аватарка/выход', которые в свою очередь должны отображаться в зависимости от пути соответственно. Что бы я не писал в пути к этим компонентам отображается все равно вышестоящий (первый). Подскажите как пофиксить?
Когда нужна общая область для разных страниц, то используется вложенность, которой в вашем примере нет. Простей вариант с общей разметкой разбирается на видео про Layout ruclips.net/video/ApftxkYnXdo/видео.html Это частный случай вложенного роутинга. Причем разные страницы можно объединять под разными лейаутами.
@@mishanep спасибо огромное! Видео помогло!
Будет ли видео об run build? Не могу решить проблему с BrowserRouter(не грузит страницы), а с HashRouter все работает в билде
Не сталкивался с проблемами при обычной сборке. Собрал сейчас проект, запустил - всё четко. Там на SSR есть свои тонкости, но они тоже решаемы через StaticRouter.
Подскажите пожалуйста, если ставлю теги Route, routes... и так далее, все правильно с вложеностью с импортами, только роуты пишу, пропадает вся инфа, белый экран и нету ошибок, что делать?
такая же история, разобрались?
Михаил, привет! Не могу разобраться, а как сделать переход на вложенный роут и скрол по ссылке как было бы при ? Может подскажешь, пожалуйста, или какую-то статью скинешь)
Попробуйте доп библиотеку react-router-hash-link
Интересно бы увидеть роутинг в связке с редаксом и регистрацией, хотя представление как это сделать я имею, но хотелось бы увидеть))
Есть что-то подобное ruclips.net/video/ivtbRBEjLW8/видео.html но со старым роутером. Как раз после этого видео вышло обновление и я кинулся записывать данный цикл по роутингу.
Спасибо, сэкономил время что бы не читать док! =)
Вложенный роутинг в React Router 6
к сожалению очень поверхностно, но неплохое дополнение к примерам из доки...
Like
🤩🤩🤩🤩🤩🤩🤩🤩🤩
Это охуенно, спасибо!
Расскажите пожалуйста еще про lazy loading в 6 версии роутера)
Есть риск, что эта часть довольно скоро поменяется)) 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
И вся премудрость.
@@mishanep Спасибо за пример, его не хватало..можно оказыается целый блок с роутингом в ленивую загрузку засунуть, круто)) Тогда ждем ролик о нововведениях 18 реакта)))
есть кто-то из желающих вместе поучить реакт на практике?
1:40
"/" - решётка
* Просто забавно получилось)
Некорректный урок.