Занимаюсь уже который день по этим урокам и тихо офигеваю, насколько оказывается качественно можно делать учебные материалы. Не могу больше молчать. Это офигенно!! Где ж ты был все это время, родной.
Не знаю, может я плохо ищу, но я не находил настолько качественных рускоязычных материалов по данной теме. Просто нет слова, Миш, огромнейшее Вам спасибо за Ваш труд!
На платном курсе встретил обучение React-router 5, но проект был на React 18 и 5-я версия выдавала ошибки. После этого обратился к ютубу, и как же я счастлив, что мне попались именно вы
Редко пишу комментарии, но я просто не знаю, представляете ли Вы, насколько Ваши ролики по React Router полезны (другие видео от Вас не смотрел еще :) ). Мало того, что 6 версия библиотеки почти ни в каких русскоязычных источниках подробно не освещается, так еще и такой полезный контент для новичков, как в этом ролике. Надеюсь, будете продолжать и набирать популярность!
Вы для меня находка Михаил!) Есть вашим подписчиком с серии видео про Router,которая мне очень пригодилась. Отличная подача материала, без воды и по делу 👍 Как только пройду испытательный, поддержу ваш канал✌️
я чуть в колбасу не перекрутился, когда прошлый урок понимал, тьфу тьфу освоил... а этот наверное стреляться буду... но интересные темы автор преподносит!
Твой канал очередное открытие для меня!) Всё думал когда сесть за доку и посмотреть что там нового, но с тобой всё становится проще:))) Развития твоему каналу))
Огромное спасибо, по React много материала смотрю за последние время , и очень много искал как раз именно эту тему с роутами , авторизацией и работой с приватными роутами, очень круто и понятно объясняете! И благодаря вам теперь это как дважды два 😀 Огромное спасибо за такой качественный и крутой материал 👍
объясните подробнее пожалуйста кто знает 13:46 на 7строчке - зачем вот такие знаки вопроса после каждого слова? fromPage = location.state?.from?pathname
Вадим, это optional chaining. Простыми словами - мы пытаемся получить доступ к from только если state === true. В случае, если state не будет существовать, то у вас не упадет ошибка и не нужно такие кейсы проверять с помощью if, например. Аналогично с pathname - пробуем его достать только если from существует
Этот код использует опциональную цепочку обращений (optional chaining) и считывает значение свойства from из объекта location.state, если оно существует, иначе возвращает undefined. Если значение location.state не является объектом или у этого объекта нет свойства from, то fromPage примет значение undefined. Две знаком вопросов (?.) - это оператор опциональной цепочки. Он позволяет безопасно обходить свойства объекта, которые могут отсутствовать, чтобы избежать ошибок Cannot read property 'xxx' of undefined. В данном случае, если location.state не определен или равен null, то вместо ошибки будет возвращено значение undefined, а дальше сработает еще одна опциональная цепочка для свойства pathname.
Хотелось бы вариант, когда все страницы (кроме входа) приватные :) Может есть более красивая реализация такого сценария. Что бы не оборачивать каждую страницу
Приветствую, Михаил. Отличные уроки! Конкретно в этом уроке не могу понять почему не срабатывает replace, когда логинимся. В итоге я могу попасть обратно на страницу логина нажав стрелку назад. Подскажите пожалуйста, в чем может быть причина?
При разработке нового сайта - не так очевидно. Но если сайт уже живет какое-то время, проиндексирован поисковиками и уже оказался в закладках у посетителей, то просто так менять адреса страниц чревато. И поисковики в ранге могут понизить, и пользователи 404-й не обрадуются.
Всем привет! Можете подсказать можно ли для перехода по истории не создавать новые кнопки, а повесить их на дефолтные браузерные кнопки. Я так понимаю они же не будут работать, если происходит постраничная пагинация? Например, я прокликал по порядку : 1,2,3,4,5 страница, а потом нажимаю дефолтную браузерную кнопку назад. Но она, я так понимаю не сработает без navigate(-1)?)
как соединить connected-react-router middleware с react-router v6 в 18 версии реакта? и вообще как я понял conncted-react-router не работает в 18 версии реакта или я просто не могу настроить получая ошибку - Cannot read properties of undefined (reading 'pathname')
Михаил, очень понятная подача материала! У меня появилась одна проблема, которую никак не могу решить: хук useAuth предоставляет null значение для { user, signin, signout }. Пробовал и без хука, напрямую обернуть в , все равно не видит функции. После сабмита формы получаю [Uncaught TypeError: signin is not a function]. Не сталкивались с такой пролемой?
Здравствуйте. С описанной ошибкой не сталкивался. Авторизация не обязательно в реактовском контексте будет жить. Вариантов много. Чаще встречается вариант с редакс.
У меня вопрос, а если мне надо стилизовать страницу из папки pages и я хочу это сделать через css модули, то мне надо создаваать папочку под каждую страницу и туда уже складывать и саму page и css модуль? или в этом случае как-то по-другому делается?)) Спасибо за урок!)
Чаще всего стили пишутся на уровне компонентов. А страница просто переиспользует их. При необходимости на уровне страницы могут быть дополнительные стили. Посмотрите в сторону css-модулей.
а чтобы не терять данные авторизации, их обычно хранят в браузерной памяти. Об этом тоже есть видео ruclips.net/video/sdlYNKjCGU0/видео.html В useEffect можно перед запросом на авторизацию можно проверить не авторизованы ли мы в настоящий момент.
Приветствую. Не совсем понятна логика. Выглядит так, что попав на страницу с конкретной ссылкой (например с id 1) мы можем кликнуть на ссылку, никуда не перейти (id всё ещё один), но захотим сделать новый запрос на сервер? Не очень понятно зачем. Теоретически у нас компонент может иметь также гет-параметры, которые тоже можно добавить в зависимости и заодно сделать частью запроса к серверу.
Спасибо за видео, подписалась, думаю этот канал будет мне полезен! Вопросик: не рекомендуется использовать navigate(-1), а лучше Link, как я поняла, но ведь для Link нужно знать конкретный путь, а если мы хотим просто назад(то есть откуда пришел пользователь) как быть?
Если нужна кнопка назад, то navigate(-1) отлично подходит. Иногда предыдущая страница бывает не пригодной для возвращения по каким-то причинам, например, страница оплаты. Но тут надо отдельно рассматривать. Либо в историю такую страницу не записывать, либо отдельную логику прописывать. У нас есть state, доступный через location, и мы при каждом переходе можем фиксировать откуда пришли. Соответственно, использовать эту информацию, в том числе и для возвращения на предыдущие шаги.
useContext тут объясняется наверное лучше чем в специальных видео)) но у меня другая проблема)) так как с сервера через редакс юзер приходит позже, чем отрисовывается компонент, он думает, что юзер не залогинен и всегда возвращает на страницу логина , как решать эту проблему? вариант с токеном в локальной памяти тоже не вариант, не успевает отработать запрос на сервер
Михаил, в первую очередь спасибо за проделанную работу! У меня вопрос, а как лучше поступить с приватными роутами, если есть общая разметка. Как обернуть общую разметку?
Нужно обернуть element Layout в ? Спасибо за ответ!
Приветствую, Амир! Если вы хотите, чтобы все страницы сайты были приватными, то тогда да, можно попробовать ваш вариант. В принципе не обязательно все страницы делать с одинаковой общей частью, подобных "родителей" может быть несколько для разных страниц. Хотя возможно вам просто нужно какую-то часть в Layout показывать по условию, а не делать весь сайт приватным (страница авторизации тоже может захотеть какого-то оформления). А скрывать можно по условию, проверяя авторизован ли пользователь, используя тот же хук useAuth.
в упрощённом варианте стейт живёт только в оперативке, и при обновлении авторизация слетает. В реальности мы хранили эту инфу в локал сторедж и синхронились бы с ним при обновлении страницы.
В JavaScript мы можем вернуть в качестве значения только одну сущность. Поэтому в случаях, когда сущностей несколько, их надо во что-то обернуть. Не всегда хочется создавать дополнительную разметку, поэтому существует такая штука как React.Fragment. В данном случае вариант является укороченной записью использования React фрагмента.
Здравствуйте! Подскажите, пожалуйста, выскакивает ошибка: TypeError: Cannot destructure property 'signin' of 'Object(...)(...)' as it is null На строчке: const {signin} = useAuth() в компоненте Loginpage.js Может знаете, с чем это связано? проверяю целый час, все также как и у вас..
@@mishanep Да, убрала начальное значение null и действительно помогло), а еще неправильно передавала Context, исправила, теперь все работает! Спасибо большое!!😊
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
0:56 - кнопка назад
6:25 - переадресация
7:50 - объект Location
9:53 - приватные роуты
16:25 - упрощенная авторизация с createContext
18:18 - создание prop value
19:54 - кастомный хук useAuth
20:47 - использование контекста
25:39 - объяснение авторизации
27:19 - о коммитах на github
Занимаюсь уже который день по этим урокам и тихо офигеваю, насколько оказывается качественно можно делать учебные материалы. Не могу больше молчать. Это офигенно!!
Где ж ты был все это время, родной.
Превосходное изложение материала, не перестаю радоваться вашему присутствию в RUclips. Спасибо, Михаил.
Спасибо и Вам на добром слове =)
Не знаю, может я плохо ищу, но я не находил настолько качественных рускоязычных материалов по данной теме. Просто нет слова, Миш, огромнейшее Вам спасибо за Ваш труд!
Даже на платных курсах такого качества материала не получаешь, спасибо, это очень полезно!
Что-то слишком часто Вы нас балуете годным контентом )
Огромное спасибо , однозначно лайк )
Какие прекрасные уроки! Прохожу с их помощью урок по созданию SPA со странами ) Спасибо!!!
На платном курсе встретил обучение React-router 5, но проект был на React 18 и 5-я версия выдавала ошибки. После этого обратился к ютубу, и как же я счастлив, что мне попались именно вы
Круто!) такой хороший темп Вы задали, что каждый день проверяю, вышло ли новое видео!) Спасибо!
Редко пишу комментарии, но я просто не знаю, представляете ли Вы, насколько Ваши ролики по React Router полезны (другие видео от Вас не смотрел еще :) ). Мало того, что 6 версия библиотеки почти ни в каких русскоязычных источниках подробно не освещается, так еще и такой полезный контент для новичков, как в этом ролике. Надеюсь, будете продолжать и набирать популярность!
Ваще супер, надо еще раз пересмотреть. Чтобы все запомнить.
Вы для меня находка Михаил!)
Есть вашим подписчиком с серии видео про Router,которая мне очень пригодилась.
Отличная подача материала, без воды и по делу 👍
Как только пройду испытательный, поддержу ваш канал✌️
Большое спасибо, после обновления роутера не мог понять как с ним работать, ваш плейлист по новому роутеру как спасательный круг !)
Михаил, спасибо за урок. С нетерпением жду следующего видео.
Это ТОП!!! Спасибо большое!
Михаил талант обучения, очень доступно и понятно, прям нектар для мозга. Информацию с такой подачей можно принимать без отдыха
Очень интересный урок получился. Прямо с удовольствием действия повторял и читал доп.инфу. Спасибо вам за труд!
я чуть в колбасу не перекрутился, когда прошлый урок понимал, тьфу тьфу освоил... а этот наверное стреляться буду... но интересные темы автор преподносит!
Это не видео, это - золото. Вы супер
Твой канал очередное открытие для меня!) Всё думал когда сесть за доку и посмотреть что там нового, но с тобой всё становится проще:)))
Развития твоему каналу))
Огромное спасибо, по React много материала смотрю за последние время , и очень много искал как раз именно эту тему с роутами , авторизацией и работой с приватными роутами, очень круто и понятно объясняете!
И благодаря вам теперь это как дважды два 😀
Огромное спасибо за такой качественный и крутой материал 👍
Дуже круто. Дякую!
Очень помогло в понимании, как это всё работает вместе. Спасибо.
очень полезная информация по работе с пакетом react router version 6, благодарю
Очень информативное видео. Спасибо большое за проделанную работу !!!
Михаил, вы лучший!
То что доктор прописал! Сразу куча вопросов отпала.
Спасибо за подробное объяснение!)
спасибо большое! Очень информативно
Михаил, огромное спасибо за Ваш труд. Отличное видео.
Всё отлично изложено и понятно, супер контент, спасибо вам большое
Ты лучший! Всегда все по полочкам!
Михаил, спасибо большое за лекцию!
От души душевно. Хорошие уроки, спасибо.
Хождение по истории - круто
Супер урок! Спасибо Михаил!
Спасибо, очень интересно посмотреть 😊
Шикарный канал. Спасибо вам!
Михаил спасибо!!!
Отличный канал, автору большой респект!
Лучшая подача информации
Спасибо за Ваши старания!
Михаил, большое спасибо, как всегда спасаете)))
Просто нет слов!!! Спасибо
Спасибо, Михаил!🤘
Чувствую, как ростуууууу. Спасибо. Помог разобраться.
Как всегда познавательно !
Просто супер, спасибо!
Отлично, очень полезно, спасибо
Отличная информация
уроки огонь
потрясно
Спасибо! Классное видео. Было бы здорово, если бы хоть маленько рассказал про HOC.
Можно и про hoc, но эта техника несколько устарела. Сегодня для выделения логики используют кастомные хуки и/или редакс
Спасибо большое!!!
топ подача!
Лучший!
Спасибо
спасибо тебе и твоим роликам за то что, мне не нужно смотреть индусов))
Работа с историей, локацией и приватными роутами в React-router 6
объясните подробнее пожалуйста кто знает
13:46
на 7строчке - зачем вот такие знаки вопроса после каждого слова?
fromPage = location.state?.from?pathname
оператор опциональной последовательности
Вадим, это optional chaining. Простыми словами - мы пытаемся получить доступ к from только если state === true. В случае, если state не будет существовать, то у вас не упадет ошибка и не нужно такие кейсы проверять с помощью if, например. Аналогично с pathname - пробуем его достать только если from существует
Этот код использует опциональную цепочку обращений (optional chaining) и считывает значение свойства from из объекта location.state, если оно существует, иначе возвращает undefined.
Если значение location.state не является объектом или у этого объекта нет свойства from, то fromPage примет значение undefined.
Две знаком вопросов (?.) - это оператор опциональной цепочки. Он позволяет безопасно обходить свойства объекта, которые могут отсутствовать, чтобы избежать ошибок Cannot read property 'xxx' of undefined.
В данном случае, если location.state не определен или равен null, то вместо ошибки будет возвращено значение undefined, а дальше сработает еще одна опциональная цепочка для свойства pathname.
Хотелось бы вариант, когда все страницы (кроме входа) приватные :) Может есть более красивая реализация такого сценария. Что бы не оборачивать каждую страницу
Такой же вопрос у меня) нашли решение?
@@maxamax5695 к сожелению, нет
Приветствую, Михаил. Отличные уроки! Конкретно в этом уроке не могу понять почему не срабатывает replace, когда логинимся. В итоге я могу попасть обратно на страницу логина нажав стрелку назад. Подскажите пожалуйста, в чем может быть причина?
7:43 вы добавили переадрисацию на другую страницу, в каких случаях это может быть полезно? Почему просто не изменить path ?
При разработке нового сайта - не так очевидно. Но если сайт уже живет какое-то время, проиндексирован поисковиками и уже оказался в закладках у посетителей, то просто так менять адреса страниц чревато. И поисковики в ранге могут понизить, и пользователи 404-й не обрадуются.
спасибо!!!!
Михаил, можете пожалуйста рассказать, как сделать так, чтобы все роуты требовали авторизацию, без бойлерплейта
Спасибо c:
Здравствуйте. Подскажите, как зарегистрированному пользователю можно ограничить некоторые страницы?
Всем привет! Можете подсказать можно ли для перехода по истории не создавать новые кнопки, а повесить их на дефолтные браузерные кнопки. Я так понимаю они же не будут работать, если происходит постраничная пагинация? Например, я прокликал по порядку : 1,2,3,4,5 страница, а потом нажимаю дефолтную браузерную кнопку назад. Но она, я так понимаю не сработает без navigate(-1)?)
как соединить connected-react-router middleware с react-router v6 в 18 версии реакта? и вообще как я понял conncted-react-router не работает в 18 версии реакта или я просто не могу настроить получая ошибку - Cannot read properties of undefined (reading 'pathname')
Друг а ты не подскажешь как занулить поля в форме после нажатия кнопки submit в redux-form
Благодарю пол дня искал как реализовать провайдер для протектед роута, одни идусы всякую хуйню выкладывают, и тут к тебе попал.
Михаил, очень понятная подача материала! У меня появилась одна проблема, которую никак не могу решить: хук useAuth предоставляет null значение для { user, signin, signout }. Пробовал и без хука, напрямую обернуть в , все равно не видит функции. После сабмита формы получаю [Uncaught TypeError: signin is not a function]. Не сталкивались с такой пролемой?
Здравствуйте.
С описанной ошибкой не сталкивался. Авторизация не обязательно в реактовском контексте будет жить. Вариантов много. Чаще встречается вариант с редакс.
4 раза переписывал все вместе с видео и только потом догнал, как все работает. Ох, если бы не твой видос, наверное лысым стал бы.))))
Подскажите. Как это все дружить с редаксом?
А какая разница между переадресацией через navigate('ссылка', {опции}) и через ?
Компонент Navigate предназначен для переадресации мгновенно при попадании на страницу. Метод navigate для событий, вроде клика мыши.
@@mishanep Спасибо за ответ!!!!
В реальном проекте у нас не будет auth false или true, мы этот аuth получаем асинхронным способом, что делать в этом случае?
Не зря я на Вас подписан)) уже не первый раз тушите пожар моего пе@дака
жаль, отсутствует код урока
У меня вопрос, а если мне надо стилизовать страницу из папки pages и я хочу это сделать через css модули, то мне надо создаваать папочку под каждую страницу и туда уже складывать и саму page и css модуль? или в этом случае как-то по-другому делается?)) Спасибо за урок!)
Чаще всего стили пишутся на уровне компонентов. А страница просто переиспользует их. При необходимости на уровне страницы могут быть дополнительные стили.
Посмотрите в сторону css-модулей.
А пользователь не может подменить данные стейта на клиенте и получить таким образом доступ к приватным роутам? буду признателен если объяснишь
и еще вопрос, как сделать так, что бы при перезагрузке страницы не оправлялся запрос на сервер об авторизации пользователя?
а чтобы не терять данные авторизации, их обычно хранят в браузерной памяти. Об этом тоже есть видео ruclips.net/video/sdlYNKjCGU0/видео.html
В useEffect можно перед запросом на авторизацию можно проверить не авторизованы ли мы в настоящий момент.
Это было круто, так четко рассказываешь, вся ифна прям по полочкам раскладывается) Михаил подскажи пожалуйста есть компонент на который попадаем через
Приветствую.
Не совсем понятна логика. Выглядит так, что попав на страницу с конкретной ссылкой (например с id 1) мы можем кликнуть на ссылку, никуда не перейти (id всё ещё один), но захотим сделать новый запрос на сервер? Не очень понятно зачем. Теоретически у нас компонент может иметь также гет-параметры, которые тоже можно добавить в зависимости и заодно сделать частью запроса к серверу.
Спасибо за видео, подписалась, думаю этот канал будет мне полезен!
Вопросик: не рекомендуется использовать navigate(-1), а лучше Link, как я поняла, но ведь для Link нужно знать конкретный путь, а если мы хотим просто назад(то есть откуда пришел пользователь) как быть?
Если нужна кнопка назад, то navigate(-1) отлично подходит. Иногда предыдущая страница бывает не пригодной для возвращения по каким-то причинам, например, страница оплаты. Но тут надо отдельно рассматривать. Либо в историю такую страницу не записывать, либо отдельную логику прописывать.
У нас есть state, доступный через location, и мы при каждом переходе можем фиксировать откуда пришли. Соответственно, использовать эту информацию, в том числе и для возвращения на предыдущие шаги.
useContext тут объясняется наверное лучше чем в специальных видео))
но у меня другая проблема)) так как с сервера через редакс юзер приходит позже, чем отрисовывается компонент, он думает, что юзер не залогинен и всегда возвращает на страницу логина , как решать эту проблему?
вариант с токеном в локальной памяти тоже не вариант, не успевает отработать запрос на сервер
Привет. Может ты решил данную проблему и можешь рассказать как ее обойти?
@@ЕвгенийБорисевич-т6д если честно я уже и не помню))
Спасибо! Интересно, можно ли с помощью React router вызывать обновление страницы, например чтобы сайт увидел пришедшую с сервера куку, на spa
Не сталкивался с подобной задачей. Обычно при таком подходе общение с сервером происходит либо посредством REST API/GraphQL, либо через WebSocket.
Михаил, в первую очередь спасибо за проделанную работу! У меня вопрос, а как лучше поступить с приватными роутами, если есть общая разметка. Как обернуть общую разметку?
Нужно обернуть element Layout в ? Спасибо за ответ!
Приветствую, Амир!
Если вы хотите, чтобы все страницы сайты были приватными, то тогда да, можно попробовать ваш вариант.
В принципе не обязательно все страницы делать с одинаковой общей частью, подобных "родителей" может быть несколько для разных страниц.
Хотя возможно вам просто нужно какую-то часть в Layout показывать по условию, а не делать весь сайт приватным (страница авторизации тоже может захотеть какого-то оформления). А скрывать можно по условию, проверяя авторизован ли пользователь, используя тот же хук useAuth.
@@mishanep спасибо большое 🙏
Меня почему то при обновлении страницы MainPage выкидывает обратно на Login
в упрощённом варианте стейт живёт только в оперативке, и при обновлении авторизация слетает.
В реальности мы хранили эту инфу в локал сторедж и синхронились бы с ним при обновлении страницы.
А что означает такая запись:
....
зачем оборачивать в "пустой элемент" ?
В JavaScript мы можем вернуть в качестве значения только одну сущность. Поэтому в случаях, когда сущностей несколько, их надо во что-то обернуть. Не всегда хочется создавать дополнительную разметку, поэтому существует такая штука как React.Fragment. В данном случае вариант является укороченной записью использования React фрагмента.
@@mishanep дополнительная разметка - имеется ввиду типа блок ?
@@metall1c да
Бля это потрясающе
good
16:43
Код урока бы...
Есть репозиторий под плей-лист
github.com/michey85/youtube-react-router-v6
@@mishanep спасибо Михаил!
Добрый день. Вы говорите, что можно реализовать авторизацию через Redux. Как это можно сделать?
У меня есть пример с Redux-Toolkit и авторизацией с Firebase ruclips.net/video/ivtbRBEjLW8/видео.html
Вот зачем убирать useHistory и заменять его на новое название? Нельзя было оставить название
слыш ты. это хлам, а не видео. чё refresh не показал?
Здравствуйте! Подскажите, пожалуйста, выскакивает ошибка:
TypeError: Cannot destructure property 'signin' of 'Object(...)(...)' as it is null
На строчке: const {signin} = useAuth() в компоненте Loginpage.js
Может знаете, с чем это связано? проверяю целый час, все также как и у вас..
Выведите в консоль, что вам возвращает хук. Скорее всего это null, из которого ничего деструктуризацией не вытащить. Полагаю, хук сделан некорректно.
@@mishanep Да, убрала начальное значение null и действительно помогло), а еще неправильно передавала Context, исправила, теперь все работает! Спасибо большое!!😊
Спасибо огромное за ваши старания!
Супер урок! Спасибо Михаил!