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