Работа с историей, локацией и приватными роутами в React-router 6
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- React Router предоставляет хук useNavigate, который возвращает функцию для навигации между страницами. Есть также компонент Navigate для редиректов. А с помощью навигации и объекта location можно организовать защищенные страницы - только для авторизованных пользователей.
00:00 Введение
00:43 История и кнопка "Назад"
03:38 Параметры навигации
06:15 Переадресация с Navigate
07:43 Объект location
09:43 Приватные роуты
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
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
Занимаюсь уже который день по этим урокам и тихо офигеваю, насколько оказывается качественно можно делать учебные материалы. Не могу больше молчать. Это офигенно!!
Где ж ты был все это время, родной.
Превосходное изложение материала, не перестаю радоваться вашему присутствию в TH-cam. Спасибо, Михаил.
Спасибо и Вам на добром слове =)
Не знаю, может я плохо ищу, но я не находил настолько качественных рускоязычных материалов по данной теме. Просто нет слова, Миш, огромнейшее Вам спасибо за Ваш труд!
Спасибо за Ваши старания!
Спасибо огромное за ваши старания!
Супер урок! Спасибо Михаил!
Михаил, спасибо большое за лекцию!
Шикарный канал. Спасибо вам!
Даже на платных курсах такого качества материала не получаешь, спасибо, это очень полезно!
От души душевно. Хорошие уроки, спасибо.
Спасибо за подробное объяснение!)
Отличный канал, автору большой респект!
Круто!) такой хороший темп Вы задали, что каждый день проверяю, вышло ли новое видео!) Спасибо!
Как всегда познавательно !
Ты лучший! Всегда все по полочкам!
спасибо большое! Очень информативно
Михаил, огромное спасибо за Ваш труд. Отличное видео.
Очень хорошее объяснение материала! Спасибо буду смотреть дальше!
Всё отлично изложено и понятно, супер контент, спасибо вам большое
Михаил, спасибо за урок. С нетерпением жду следующего видео.
Очень информативное видео. Спасибо большое за проделанную работу !!!
Лучшая подача информации
Просто нет слов!!! Спасибо
очень полезная информация по работе с пакетом react router version 6, благодарю
Михаил, вы лучший!
Просто супер, спасибо!
Спасибо, очень интересно посмотреть 😊
Михаил, большое спасибо, как всегда спасаете)))
Что-то слишком часто Вы нас балуете годным контентом )
Огромное спасибо , однозначно лайк )
Михаил спасибо!!!
Очень помогло в понимании, как это всё работает вместе. Спасибо.
Твой канал очередное открытие для меня!) Всё думал когда сесть за доку и посмотреть что там нового, но с тобой всё становится проще:)))
Развития твоему каналу))
Спасибо, Михаил!🤘
Отличная информация
Большое спасибо, после обновления роутера не мог понять как с ним работать, ваш плейлист по новому роутеру как спасательный круг !)
Это не видео, это - золото. Вы супер
Огромное спасибо, по React много материала смотрю за последние время , и очень много искал как раз именно эту тему с роутами , авторизацией и работой с приватными роутами, очень круто и понятно объясняете!
И благодаря вам теперь это как дважды два 😀
Огромное спасибо за такой качественный и крутой материал 👍
Какие прекрасные уроки! Прохожу с их помощью урок по созданию SPA со странами ) Спасибо!!!
Михаил талант обучения, очень доступно и понятно, прям нектар для мозга. Информацию с такой подачей можно принимать без отдыха
Отлично, очень полезно, спасибо
Очень интересный урок получился. Прямо с удовольствием действия повторял и читал доп.инфу. Спасибо вам за труд!
То что доктор прописал! Сразу куча вопросов отпала.
Вы для меня находка Михаил!)
Есть вашим подписчиком с серии видео про Router,которая мне очень пригодилась.
Отличная подача материала, без воды и по делу 👍
Как только пройду испытательный, поддержу ваш канал✌️
Спасибо большое!!!
уроки огонь
На платном курсе встретил обучение React-router 5, но проект был на React 18 и 5-я версия выдавала ошибки. После этого обратился к ютубу, и как же я счастлив, что мне попались именно вы
Чувствую, как ростуууууу. Спасибо. Помог разобраться.
Спасибо
Хождение по истории - круто
потрясно
Редко пишу комментарии, но я просто не знаю, представляете ли Вы, насколько Ваши ролики по React Router полезны (другие видео от Вас не смотрел еще :) ). Мало того, что 6 версия библиотеки почти ни в каких русскоязычных источниках подробно не освещается, так еще и такой полезный контент для новичков, как в этом ролике. Надеюсь, будете продолжать и набирать популярность!
Лучший!
топ подача!
спасибо!!!!
Спасибо c:
Спасибо! Классное видео. Было бы здорово, если бы хоть маленько рассказал про HOC.
Можно и про hoc, но эта техника несколько устарела. Сегодня для выделения логики используют кастомные хуки и/или редакс
я чуть в колбасу не перекрутился, когда прошлый урок понимал, тьфу тьфу освоил... а этот наверное стреляться буду... но интересные темы автор преподносит!
good
Бля это потрясающе
спасибо тебе и твоим роликам за то что, мне не нужно смотреть индусов))
Хотелось бы вариант, когда все страницы (кроме входа) приватные :) Может есть более красивая реализация такого сценария. Что бы не оборачивать каждую страницу
Такой же вопрос у меня) нашли решение?
@@maxamax5695 к сожелению, нет
Работа с историей, локацией и приватными роутами в React-router 6
Спасибо за видео, подписалась, думаю этот канал будет мне полезен!
Вопросик: не рекомендуется использовать navigate(-1), а лучше Link, как я поняла, но ведь для Link нужно знать конкретный путь, а если мы хотим просто назад(то есть откуда пришел пользователь) как быть?
Если нужна кнопка назад, то navigate(-1) отлично подходит. Иногда предыдущая страница бывает не пригодной для возвращения по каким-то причинам, например, страница оплаты. Но тут надо отдельно рассматривать. Либо в историю такую страницу не записывать, либо отдельную логику прописывать.
У нас есть state, доступный через location, и мы при каждом переходе можем фиксировать откуда пришли. Соответственно, использовать эту информацию, в том числе и для возвращения на предыдущие шаги.
Не зря я на Вас подписан)) уже не первый раз тушите пожар моего пе@дака
Приветствую, Михаил. Отличные уроки! Конкретно в этом уроке не могу понять почему не срабатывает replace, когда логинимся. В итоге я могу попасть обратно на страницу логина нажав стрелку назад. Подскажите пожалуйста, в чем может быть причина?
Михаил, можете пожалуйста рассказать, как сделать так, чтобы все роуты требовали авторизацию, без бойлерплейта
4 раза переписывал все вместе с видео и только потом догнал, как все работает. Ох, если бы не твой видос, наверное лысым стал бы.))))
Здравствуйте. Подскажите, как зарегистрированному пользователю можно ограничить некоторые страницы?
Друг а ты не подскажешь как занулить поля в форме после нажатия кнопки submit в redux-form
Спасибо! Интересно, можно ли с помощью React router вызывать обновление страницы, например чтобы сайт увидел пришедшую с сервера куку, на spa
Не сталкивался с подобной задачей. Обычно при таком подходе общение с сервером происходит либо посредством REST API/GraphQL, либо через WebSocket.
Подскажите. Как это все дружить с редаксом?
Это было круто, так четко рассказываешь, вся ифна прям по полочкам раскладывается) Михаил подскажи пожалуйста есть компонент на который попадаем через
Приветствую.
Не совсем понятна логика. Выглядит так, что попав на страницу с конкретной ссылкой (например с id 1) мы можем кликнуть на ссылку, никуда не перейти (id всё ещё один), но захотим сделать новый запрос на сервер? Не очень понятно зачем. Теоретически у нас компонент может иметь также гет-параметры, которые тоже можно добавить в зависимости и заодно сделать частью запроса к серверу.
7:43 вы добавили переадрисацию на другую страницу, в каких случаях это может быть полезно? Почему просто не изменить path ?
При разработке нового сайта - не так очевидно. Но если сайт уже живет какое-то время, проиндексирован поисковиками и уже оказался в закладках у посетителей, то просто так менять адреса страниц чревато. И поисковики в ранге могут понизить, и пользователи 404-й не обрадуются.
как соединить 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]. Не сталкивались с такой пролемой?
Здравствуйте.
С описанной ошибкой не сталкивался. Авторизация не обязательно в реактовском контексте будет жить. Вариантов много. Чаще встречается вариант с редакс.
Михаил, в первую очередь спасибо за проделанную работу! У меня вопрос, а как лучше поступить с приватными роутами, если есть общая разметка. Как обернуть общую разметку?
Нужно обернуть element Layout в ? Спасибо за ответ!
Приветствую, Амир!
Если вы хотите, чтобы все страницы сайты были приватными, то тогда да, можно попробовать ваш вариант.
В принципе не обязательно все страницы делать с одинаковой общей частью, подобных "родителей" может быть несколько для разных страниц.
Хотя возможно вам просто нужно какую-то часть в Layout показывать по условию, а не делать весь сайт приватным (страница авторизации тоже может захотеть какого-то оформления). А скрывать можно по условию, проверяя авторизован ли пользователь, используя тот же хук useAuth.
@@mishanep спасибо большое 🙏
жаль, отсутствует код урока
У меня вопрос, а если мне надо стилизовать страницу из папки pages и я хочу это сделать через css модули, то мне надо создаваать папочку под каждую страницу и туда уже складывать и саму page и css модуль? или в этом случае как-то по-другому делается?)) Спасибо за урок!)
Чаще всего стили пишутся на уровне компонентов. А страница просто переиспользует их. При необходимости на уровне страницы могут быть дополнительные стили.
Посмотрите в сторону css-модулей.
А пользователь не может подменить данные стейта на клиенте и получить таким образом доступ к приватным роутам? буду признателен если объяснишь
В реальном проекте у нас не будет auth false или true, мы этот аuth получаем асинхронным способом, что делать в этом случае?
А какая разница между переадресацией через navigate('ссылка', {опции}) и через ?
Компонент Navigate предназначен для переадресации мгновенно при попадании на страницу. Метод navigate для событий, вроде клика мыши.
@@mishanep Спасибо за ответ!!!!
16:43
и еще вопрос, как сделать так, что бы при перезагрузке страницы не оправлялся запрос на сервер об авторизации пользователя?
а чтобы не терять данные авторизации, их обычно хранят в браузерной памяти. Об этом тоже есть видео th-cam.com/video/sdlYNKjCGU0/w-d-xo.html
В useEffect можно перед запросом на авторизацию можно проверить не авторизованы ли мы в настоящий момент.
Меня почему то при обновлении страницы MainPage выкидывает обратно на Login
в упрощённом варианте стейт живёт только в оперативке, и при обновлении авторизация слетает.
В реальности мы хранили эту инфу в локал сторедж и синхронились бы с ним при обновлении страницы.
useContext тут объясняется наверное лучше чем в специальных видео))
но у меня другая проблема)) так как с сервера через редакс юзер приходит позже, чем отрисовывается компонент, он думает, что юзер не залогинен и всегда возвращает на страницу логина , как решать эту проблему?
вариант с токеном в локальной памяти тоже не вариант, не успевает отработать запрос на сервер
Привет. Может ты решил данную проблему и можешь рассказать как ее обойти?
@@user-pd6wi9iw7m если честно я уже и не помню))
объясните подробнее пожалуйста кто знает
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 да
Код урока бы...
Есть репозиторий под плей-лист
github.com/michey85/youtube-react-router-v6
@@mishanep спасибо Михаил!
Вот зачем убирать useHistory и заменять его на новое название? Нельзя было оставить название
Добрый день. Вы говорите, что можно реализовать авторизацию через Redux. Как это можно сделать?
У меня есть пример с Redux-Toolkit и авторизацией с Firebase th-cam.com/video/ivtbRBEjLW8/w-d-xo.html
слыш ты. это хлам, а не видео. чё refresh не показал?
Здравствуйте! Подскажите, пожалуйста, выскакивает ошибка:
TypeError: Cannot destructure property 'signin' of 'Object(...)(...)' as it is null
На строчке: const {signin} = useAuth() в компоненте Loginpage.js
Может знаете, с чем это связано? проверяю целый час, все также как и у вас..
Выведите в консоль, что вам возвращает хук. Скорее всего это null, из которого ничего деструктуризацией не вытащить. Полагаю, хук сделан некорректно.
@@mishanep Да, убрала начальное значение null и действительно помогло), а еще неправильно передавала Context, исправила, теперь все работает! Спасибо большое!!😊
Супер урок! Спасибо Михаил!