Общая разметка и компонент Outlet в React-Router 6

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

[@vatasi7312]

Михаил вы в очередной раз выручаете, давно не работал с роутами так как проект настроен больше года тому назад, сейчас начал делать другой:D и не понимал до последнего почему у меня не отображается контент.... Outlet Спасибо большое!

[@Mike-hp5vr]

Классная подача материала, четкая дикция, актуальные темы. Огромное спасибо, приятно смотреть!

[@gritsienkooleg3447]

Вот почему не могут создатели библиотеки вот так удобно и спокойно понятно и на простых примерах разложить всё ) Спасибо вам, Михаил!

[@serhioramires3166]

Да, потому что такое простое рассмотрение ущербно. Так его не используют. Это видео для дуриков.

[@user-sp8ty2ol8m]

@@serhioramires3166 так что ты тут делаешь ?)

[@user-vp9qe7gh1h]

Как раз к теме маршрутизации подошёл, Ваш ролик прям то, что доктор прописал, спасибо!

[@user-cw2xk5jt6w]

Как всегда коротко, ясно и без воды. Спс!

[@Lirrana]

Большое спасибо, прекрасный туториал. Сразу получилось переехать на v.6.1.1 Отдельное спасибо за то, что туториал без воды, и звук прекрасного качества.

[@user-iy2hd6ix9j]

Продолжайте ! тема горячая, пока контента мало, народ на канал подтянется!))) Спасибо за работу!)

[@aaronvasilev2371]

Михаил, огромное спасибо Вам за видео, так держвать. Спасибо что продолжаете заниматься каналом❤

[@isaacjon]

Здравствуйте, очень понравился ваш вариант. Не останавливайтесь 🔥🔥🔥

[@Exigoll92]

Бесконечно низкий поклон тебе! Нужная инфа, без воды.

[@user-yx4zt2ev2g]

Очень приятно слушать автора, все понятно и доступно. Лайк!)

[@alexzav1327]

Спасибо за это видео и в целом за серию Router! Вы очень понятно и доступно объясняете простыми словами, мне как новичку многие моменты стали гораздо понятнее.

[@dimalukashenko4865]

Хороший урок, спасибо за труд!

[@user-sx4zn5pf7x]

Большое спасибо! Это то, чего мне не хватало)

[@arty_game]

Большое спасибо за видео урок. Делаю тестовое задание очень помог. Прекрассная подача, продолжай в том же духе)

[@user-yi9gy4cz7n]

Очень полезная информация и хорошая подача, трудность в том, что параллельно смотрю более старый курс, там немного другие инструкции работы реакта. Благодаря вам сразу же обновляю знания, спасибо.

[@user-de8qy1mw4g]

Спасибо! Очень полезная серия видео! Коротко и ясно

[@user-zf7oh5iv3l]

Благодарю. Спасибо за внятное и понятное изложение материала. У меня как раз проект на незнакомом для меня реакте)))

[@janisdregeris248]

Ну надо же 😄😄 пока сам разбирался... и разобрался, так контент про react-router подоспел. Спасибо за видео! 😋

[@Natalia-ph]

Отличный материал и подача, все понятною спасибо!

[@user-vw3fj2sm5z]

Огромное спасибо за материал. Только начал изучать, намучался со switch

[@marinaermilova7912]

Супер! Супер! Супер! Просто огромное Вам спасибо за такое классное видео.

[@neiron3863]

Очень хорошо и доходчиво рассказываешьСпасибо!

[@Jovannii.]

Сильно! Как же я тебя искал!

[@user-jm7dy8ks7w]

Супер понятное видео. Михаил спасибо вам)

[@user-vl9eg5jd5i]

вот он, единственный реально полезный и классный контент в моей ленте YouTude, огромное спасибо

[@user-fs1pm5oe5s]

Отличное видео, спасибо за информацию!)

[@nijy001]

Спасибо за видео, очень полезная информация.

[@iharberasneu2905]

Спасибо. Очень четко разъяснил тему.

[@user-zi6ej2sx8c]

Спасибо большое за контент превосходного качества!

[@garikmelqonyan6011]

Good job, Michael!

[@user-lt5zm3ng2p]

Чем больше смотрю про реакт и больше им пользуюсь, тем больше не понимаю, почему так много вакансий на нем и в 2 раза меньше на вью и ангуляре. Очень много сложностей и писанины в нем, чтобы сделать простые вещи )))) Спасибо за материал 👍

[@user-kb5kd7ln3h]

Михаил, спасибо за объяснение

[@dima_sand]

Очень просто и понятно. Спасибо !

[@ruslanfedorov9336]

Отличное обьяснение, спасибо автору

[@maga_frank]

Коротко и понятно, в отличие от многих которые 30 минут обясняют тоже самое и менее понятно. С меня отдушинский лайкос)

[@yaroslavc1322]

Супер, классно объяснил, подписка! 😁

[@evloev4821]

Outlet это тип children прикольно) классно проводишь уроки, мне нравится, спасибо

[@matveyd7272]

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

[@from_brest2631]

прикольно сделали, мне нравится :)

[@arturnureyev5224]

Спасибо, жду новых видео

[@Boudybuilder]

Слушаю и кайфую!!!

[@ivanoliinyk8404]

Все просто и понятно спасибо

[@user-rd8uh2ym3c]

Первое человеческое объяснение!

[@kuhnivikont]

Михаил, так держать! Один из топ-каналов, на мой взгляд.

[@mishanep]

Спасибо =)

[@user-jm5pp7lm8b]

Хорошо разобрано

[@ellsonmendesYT]

I didn't understand what you were saying but I understood the code, nice @Михаил Непомнящий (Mihail )!

[@phoenixbeard8543]

Большое спасибо!

[@mighty_osaker]

Сразу видно, человек любит историю)

[@sergey9784]

Спасибо большое! Не с первого раза, но....

[@user-ie7md3mm6x]

Big thanks!

[@otabekfayziev7076]

Топ, спасибо!

[@aslanbekkaipaev9148]

СПАСИБО!!!

[@antonkulakoff]

укажи нумерацию для видео в плейлисте, так удобнее делать навигацию. А так все супер!

[@konglomora3230]

Спасибо!

[@fozilbekmurodov3131]

good luck, thanks bro

[@user-ly6pr8xq4x]

спасибо!

[@maxet2374]

быстро и понятно

[@darieandre5598]

коммент в рамках благодарности за контент

[@user-qp6yp4qk9i]

спасибо

[@user-xq8qk7ss8i]

Отличный ролик! Будет здорово, если поскорее расскажете что использовать вместо почившего . А то в документации React router предлагают какой-то неимоверный финт с хуками вытворять вместо него.

[@andrews3939]

Посмотрите в сторону

[@ineye]

Blagodaru

[@daniilivanov5430]

👍👍👍👍👍👍

[@svetlanapokrovskaya7798]

Михаил, спасибо большое за уроки. Все понятно, без воды, только нужная информация. Но у меня появился вопрос: а как быть с путями при деплое приложения на github? Мне пришлось все пути в проекте переписывать: Было по уроку: Пришлось писать: Может быть есть более красивый способ?

[@user-hq1td7vi3i]

Спасибо за урок! Подскажите что за плагин, с команды _ref вы создали функцию.

[@mishanep]

Это плагин сниппетов для react redux.

[@user-ih6ie9ve6d]

Outlet в React-Router

[@AndranikArshakyan]

Общая разметка и компонент Outlet в React-Router 6

[@Dem0nex]

Здравствуйте, спасибо за видео!! А не можете подсказать, что делать в случае, если... смысл такой: есть навбар как сейчас в ВК или инсте, по нажатию можно переключать странички, в аутлете будет нужное отрисовываться. Однако на некоторых страницах этот навбар нужно скрыть. Можно ли это как-то элегантно сделать, если он будет стоять в layоut после аутлета? Или нужно этот навбар ставить тогда отдельно в компонентах, где он должен быть?

[@lidijajezova2025]

Используйте хук useLocation, чтобы проверять pathname и на основе его уже прятать/показывать компонент.

[@mityadima]

очень похоже на ангуляр_)

[@user-sx2go7ug4b]

Михаил, спасибо большое за урок! На 0:45 вводится какое-то сочетание клавиш и и компонент сам полностью раскрывается причем с таким же названием, как сам файл .jsx. Подскажите, как такое можно настроить)

[@mishanep]

Приветствую. Я так понимаю, вопрос про сниппеты. Их можно писать самому (в том числе с помощью дополнительных сервисов вроде сниппет генераторов), либо ставить плагины под те языки и фреймворки, что вы используете. У меня есть и самописные сниппеты + что-то с плагинов.

[@natigagharzayev3936]

Что делать с новой версией, он просто так index не берет, нужно ему дать значение?

[@TransatlanticTalks]

Подскажите старичку-самоучке, который пока про Реакт по большому только в теории слушает и доучивает вёрстку - правильно ли я понимаю смысл, я же могу в Layout импортировать вместо , свой компонент (SIdebar и т.д.), уже в нём расставить Link, NavLink и т.д., ну и потом в Роутах это всё описать? И тогда Layout будет ретурнить чёт типо

[@mishanep]

Да, всё правильно

[@user-kc5kr9fq2z]

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

[@mishanep]

Нет.

[@user-islamkaz]

Можно вопрос, это же типо не обязтально использовать, можно же и просто без outlet ? Ну если буду работать на junior позиции ? Просто все дополнения забываются

[@mishanep]

Здесь могут быть разные подходы. Каждый сам решает, что и как использовать. Но да, можно обойтись без этого компонента.

[@diamondmedia3076]

у меня почему-то страница перезагружается при отрисовке именно Notfoundpage, хотя вроде сделал все как в видео

[@tinaanit2965]

Здравствуйте,Михаил , а если нам нужны 2 или более несколько layout , как в таком случае организовать это ?

[@mishanep]

Посмотрите на пример из оф доки reactrouter.com/docs/en/v6/getting-started/overview#multiple-sets-of-routes Думаю вы найдете там ответ на ваш вопрос.

[@yuliasereda5671]

Спасибо большое. А есть ссылка на репо?

[@mishanep]

Сделаю.

[@user-eg8iq6id6r]

Добрый день! Подскажите. Вы используете фрагмент ( вида ) то всё нормально. я пишу так же мне в терминале пишет ошибку: Unexpected token. В инете говорят, что эта ошибка значит, что JS ожидает что то другое. Пишу и всё становиться нормально. Подскажите, с чем это связанно.

[@beznamea9549]

Не подскажешь версию реакта, которая у тебя в проекте используется?

[@user-eg8iq6id6r]

@@beznamea9549 Проект делаю на Next. Сразу скажу, что смотрел видео про Next и там тоже использовали сокращённый синтаксис и не было проблем у них. А у меня такая ошибка вылазит.

[@mishanep]

Не сталкивался с тем, чтобы React ругался на такую запись. Ни 16-й, ни 17-й версии. С Next тоже таких проблем не помню.

[@Banan7280]

А не подскажете как в таком случае использовать memo? Если у меня например шапка и футер всегда неизменяемы, изменяется только контентная часть (Расписание) и так как она является children нашего layout, соответственно меняется аутлет и происходит всегда ререндер самого layout (вместе с header и footer обернутыми в memo)

[@mishanep]

Звучит так, что в memo нет смысла. Проп children новый, значит ререндер всё равно будет.

[@mishanep]

С другой стороны мы же явно children не передаем, мы просто используем особый компонент, внутри которого уже магия с дочерними элементами происходит. По логике ререндера лейаута быть не должно.

[@Banan7280]

@@mishanep спасибо за ответ, перепроверю, возможно сам где-то косячнул

[@user-bg3dk4se5s]

спасибо информативно . но я как новичок не могу понять одной вещи . у меня один компонент (app)который содержит другие компоненты ( header и т.д) навигации как таковой нет -небольшой лендинг. в футере есть ссылка на компонент который выглядит как отдельная страница ( использует тот же header и т.д) и я не могу понять как при нажатии на Link рендерить отдельную страницу вместо моего app / как может помочь outlet если у меня не будет как в видео хедера с сылками - как сделать так чтоб по умолчанию грузился app а при нажатии на ссылку другая страница целиком - не оставляя никаких компонентов .

[@mishanep]

Звучит так будто вам и незачем использовать подход spa. В любом случае ответ на ваш вопрос есть в видео про базовый роутинг.

[@min8132]

Не понял чем Link отличается от NavLink. Если не сложно, может кто-нибудь объяснить в двух словах?

[@melitopol_Russia]

есть желающие вместе на реакте поработать?)

[@ondrui]

я за - а какая идея?

[@user-nc8ww3zd6n]

А если я хочу, чтобы страница /about была в другом layout, допустим, LayoutAbout? Как ее запихнуть в этот другой layout?

[@mishanep]

На уровне организации структуры роутинга. Просто создаете несколько роутов с лейаутом и уже в качестве дочерних элементов указываете соответствующие страницы.

[@user-nc8ww3zd6n]

@@mishanep непонимаю... Можно код?

[@Moishe_Rubinstein]

WebStorm не хочет использовать автоимпорт для 6-ых роутов (

[@nikitasafonkin3077]

Error: useRoutes() may be used only in the context of a component. - вот такое

[@nikitasafonkin3077]

писал так же как в видео

[@nikitasafonkin3077]

обернул в и пропала ошибка , почем на видео без него работает ?

[@mishanep]

Это второе видео цикла по React router v6. В проекте уже есть Browser Router, базовый роутинг разбирался в первом видео.

[@andrews3939]

Outlet как-то больше запутьівает логику.

[@user-xr4gt8qo3t]

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

[@mishanep]

Что именно? Outlet? Или вложенность роутов?

[@user-xr4gt8qo3t]

@@mishanep Добрый вечер, да именно Outlet. Ведь сами Route работают как якорьки к компонентам, которые нам необходимо отрисовать, а Link позволяет непосредственно отрисовать эту компоненту там, где она заключена в Route. Я вот сейчас третий час сижу с простейшей проблемой)

[@user-xr4gt8qo3t]

@@mishanep Если у Вас найдется время, посмотрите это видео, здесь нет outlet и все работает(но у меня нет) kzbin.info/www/bejne/oavLhGSXZ7uef9E&ab_channel=WebDev%D1%81%D0%BD%D1%83%D0%BB%D1%8F.%D0%9A%D0%B0%D0%BD%D0%B0%D0%BB%D0%90%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%9B%D1%83%D1%89%D0%B5%D0%BD%D0%BA%D0%BE

[@mishanep]

@@user-xr4gt8qo3t на самом деле использование Outlet не что-то новое и специфичное. Подобную технику используют и другие библиотеки. Где-то это также называется аутлетом, в других либах - слотом. Суть от этого не меняется.

[@JesseJames-mh5kb]

Я изивиняюсь, а почему непонмящий? что именно ты не помнишь?

[@mishanep]

Ну вот неоригинально. Вот совсем. Каждую неделю кто-то аналогичные комментарии пишет. А главное - не смешно.

[@JesseJames-mh5kb]

@@mishanepне я просто смотрю разные обучалки для айтишников и тут смотрю автор видео вообще совсем непомнящий. Вот я и поинтересовался, почему так. А так конечно спасибо за ролики, я тебе лайк поставил, так что не смей говорить что моя шутка не смешная

[@user-oc1bh7sf3c]

Вообще не вдуплил зачем этот аутлет нужен

[@jonny185]

почему-то без browserrouter не работало. может я конечно чайник, но как у автора у меня не работало

[@pavelbero5208]

Использую typescript. Он ругается, когда задаю на index. Тип "true" не может быть назначен для типа "false | undefined".ts(2322) (JSX attribute) IndexRouteProps.index: true

[@mishanep]

По идее у роута не может быть одновременно пропов index и path. Index берет родительский путь.