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