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

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

Превосходное изложение материала, не перестаю радоваться вашему присутствию в KZread. Спасибо, Михаил.

@mishanep

2 жыл бұрын

Спасибо и Вам на добром слове =)

Не знаю, может я плохо ищу, но я не находил настолько качественных рускоязычных материалов по данной теме. Просто нет слова, Миш, огромнейшее Вам спасибо за Ваш труд!

Редко пишу комментарии, но я просто не знаю, представляете ли Вы, насколько Ваши ролики по React Router полезны (другие видео от Вас не смотрел еще :) ). Мало того, что 6 версия библиотеки почти ни в каких русскоязычных источниках подробно не освещается, так еще и такой полезный контент для новичков, как в этом ролике. Надеюсь, будете продолжать и набирать популярность!

Спасибо огромное за ваши старания!

Михаил, спасибо большое за лекцию!

Спасибо за Ваши старания!

Что-то слишком часто Вы нас балуете годным контентом ) Огромное спасибо , однозначно лайк )

Супер урок! Спасибо Михаил!

От души душевно. Хорошие уроки, спасибо.

Твой канал очередное открытие для меня!) Всё думал когда сесть за доку и посмотреть что там нового, но с тобой всё становится проще:))) Развития твоему каналу))

Шикарный канал. Спасибо вам!

Михаил, спасибо за урок. С нетерпением жду следующего видео.

Михаил, огромное спасибо за Ваш труд. Отличное видео.

Всё отлично изложено и понятно, супер контент, спасибо вам большое

Очень хорошее объяснение материала! Спасибо буду смотреть дальше!

Отличный канал, автору большой респект!

Вы для меня находка Михаил!) Есть вашим подписчиком с серии видео про Router,которая мне очень пригодилась. Отличная подача материала, без воды и по делу 👍 Как только пройду испытательный, поддержу ваш канал✌️

Ты лучший! Всегда все по полочкам!

Очень информативное видео. Спасибо большое за проделанную работу !!!

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

Спасибо за подробное объяснение!)

Даже на платных курсах такого качества материала не получаешь, спасибо, это очень полезно!

Как всегда познавательно !

Большое спасибо, после обновления роутера не мог понять как с ним работать, ваш плейлист по новому роутеру как спасательный круг !)

очень полезная информация по работе с пакетом react router version 6, благодарю

Огромное спасибо, по React много материала смотрю за последние время , и очень много искал как раз именно эту тему с роутами , авторизацией и работой с приватными роутами, очень круто и понятно объясняете! И благодаря вам теперь это как дважды два 😀 Огромное спасибо за такой качественный и крутой материал 👍

спасибо большое! Очень информативно

Михаил, большое спасибо, как всегда спасаете)))

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

Просто нет слов!!! Спасибо

Очень помогло в понимании, как это всё работает вместе. Спасибо.

Михаил, вы лучший!

Спасибо, очень интересно посмотреть 😊

Какие прекрасные уроки! Прохожу с их помощью урок по созданию SPA со странами ) Спасибо!!!

Просто супер, спасибо!

Лучшая подача информации

Это не видео, это - золото. Вы супер

Очень интересный урок получился. Прямо с удовольствием действия повторял и читал доп.инфу. Спасибо вам за труд!

Спасибо, Михаил!🤘

На платном курсе встретил обучение React-router 5, но проект был на React 18 и 5-я версия выдавала ошибки. После этого обратился к ютубу, и как же я счастлив, что мне попались именно вы

Михаил спасибо!!!

То что доктор прописал! Сразу куча вопросов отпала.

Отличная информация

Это ТОП!!! Спасибо большое!

Отлично, очень полезно, спасибо

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

уроки огонь

Чувствую, как ростуууууу. Спасибо. Помог разобраться.

Хождение по истории - круто

Лучший!

Спасибо

топ подача!

потрясно

Спасибо! Классное видео. Было бы здорово, если бы хоть маленько рассказал про HOC.

@mishanep

2 жыл бұрын

Можно и про hoc, но эта техника несколько устарела. Сегодня для выделения логики используют кастомные хуки и/или редакс

я чуть в колбасу не перекрутился, когда прошлый урок понимал, тьфу тьфу освоил... а этот наверное стреляться буду... но интересные темы автор преподносит!

спасибо!!!!

Спасибо c:

Хотелось бы вариант, когда все страницы (кроме входа) приватные :) Может есть более красивая реализация такого сценария. Что бы не оборачивать каждую страницу

@maxamax5695

9 ай бұрын

Такой же вопрос у меня) нашли решение?

@protonys

9 ай бұрын

@@maxamax5695 к сожелению, нет

good

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

Спасибо за видео, подписалась, думаю этот канал будет мне полезен! Вопросик: не рекомендуется использовать navigate(-1), а лучше Link, как я поняла, но ведь для Link нужно знать конкретный путь, а если мы хотим просто назад(то есть откуда пришел пользователь) как быть?

@mishanep

Жыл бұрын

Если нужна кнопка назад, то navigate(-1) отлично подходит. Иногда предыдущая страница бывает не пригодной для возвращения по каким-то причинам, например, страница оплаты. Но тут надо отдельно рассматривать. Либо в историю такую страницу не записывать, либо отдельную логику прописывать. У нас есть state, доступный через location, и мы при каждом переходе можем фиксировать откуда пришли. Соответственно, использовать эту информацию, в том числе и для возвращения на предыдущие шаги.

Бля это потрясающе

Это было круто, так четко рассказываешь, вся ифна прям по полочкам раскладывается) Михаил подскажи пожалуйста есть компонент на который попадаем через

@mishanep

2 жыл бұрын

Приветствую. Не совсем понятна логика. Выглядит так, что попав на страницу с конкретной ссылкой (например с id 1) мы можем кликнуть на ссылку, никуда не перейти (id всё ещё один), но захотим сделать новый запрос на сервер? Не очень понятно зачем. Теоретически у нас компонент может иметь также гет-параметры, которые тоже можно добавить в зависимости и заодно сделать частью запроса к серверу.

Здравствуйте. Подскажите, как зарегистрированному пользователю можно ограничить некоторые страницы?

Не зря я на Вас подписан)) уже не первый раз тушите пожар моего пе@дака

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

Спасибо! Интересно, можно ли с помощью React router вызывать обновление страницы, например чтобы сайт увидел пришедшую с сервера куку, на spa

@mishanep

2 жыл бұрын

Не сталкивался с подобной задачей. Обычно при таком подходе общение с сервером происходит либо посредством REST API/GraphQL, либо через WebSocket.

Друг а ты не подскажешь как занулить поля в форме после нажатия кнопки submit в redux-form

как соединить 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]. Не сталкивались с такой пролемой?

@mishanep

2 жыл бұрын

Здравствуйте. С описанной ошибкой не сталкивался. Авторизация не обязательно в реактовском контексте будет жить. Вариантов много. Чаще встречается вариант с редакс.

У меня вопрос, а если мне надо стилизовать страницу из папки pages и я хочу это сделать через css модули, то мне надо создаваать папочку под каждую страницу и туда уже складывать и саму page и css модуль? или в этом случае как-то по-другому делается?)) Спасибо за урок!)

@mishanep

2 жыл бұрын

Чаще всего стили пишутся на уровне компонентов. А страница просто переиспользует их. При необходимости на уровне страницы могут быть дополнительные стили. Посмотрите в сторону css-модулей.

7:43 вы добавили переадрисацию на другую страницу, в каких случаях это может быть полезно? Почему просто не изменить path ?

@mishanep

2 жыл бұрын

При разработке нового сайта - не так очевидно. Но если сайт уже живет какое-то время, проиндексирован поисковиками и уже оказался в закладках у посетителей, то просто так менять адреса страниц чревато. И поисковики в ранге могут понизить, и пользователи 404-й не обрадуются.

Михаил, можете пожалуйста рассказать, как сделать так, чтобы все роуты требовали авторизацию, без бойлерплейта

Михаил, в первую очередь спасибо за проделанную работу! У меня вопрос, а как лучше поступить с приватными роутами, если есть общая разметка. Как обернуть общую разметку? Нужно обернуть element Layout в ? Спасибо за ответ!

@mishanep

2 жыл бұрын

Приветствую, Амир! Если вы хотите, чтобы все страницы сайты были приватными, то тогда да, можно попробовать ваш вариант. В принципе не обязательно все страницы делать с одинаковой общей частью, подобных "родителей" может быть несколько для разных страниц. Хотя возможно вам просто нужно какую-то часть в Layout показывать по условию, а не делать весь сайт приватным (страница авторизации тоже может захотеть какого-то оформления). А скрывать можно по условию, проверяя авторизован ли пользователь, используя тот же хук useAuth.

@amir18n

2 жыл бұрын

@@mishanep спасибо большое 🙏

А пользователь не может подменить данные стейта на клиенте и получить таким образом доступ к приватным роутам? буду признателен если объяснишь

Благодарю пол дня искал как реализовать провайдер для протектед роута, одни идусы всякую хуйню выкладывают, и тут к тебе попал.

4 раза переписывал все вместе с видео и только потом догнал, как все работает. Ох, если бы не твой видос, наверное лысым стал бы.))))

Работа с историей, локацией и приватными роутами в React-router 6

и еще вопрос, как сделать так, что бы при перезагрузке страницы не оправлялся запрос на сервер об авторизации пользователя?

@mishanep

2 жыл бұрын

а чтобы не терять данные авторизации, их обычно хранят в браузерной памяти. Об этом тоже есть видео kzread.info/dash/bejne/pZigu7CEmqathZM.html В useEffect можно перед запросом на авторизацию можно проверить не авторизованы ли мы в настоящий момент.

А какая разница между переадресацией через navigate('ссылка', {опции}) и через ?

@mishanep

2 жыл бұрын

Компонент Navigate предназначен для переадресации мгновенно при попадании на страницу. Метод navigate для событий, вроде клика мыши.

@user-dl1ii9tp4u

2 жыл бұрын

@@mishanep Спасибо за ответ!!!!

Всем привет! Можете подсказать можно ли для перехода по истории не создавать новые кнопки, а повесить их на дефолтные браузерные кнопки. Я так понимаю они же не будут работать, если происходит постраничная пагинация? Например, я прокликал по порядку : 1,2,3,4,5 страница, а потом нажимаю дефолтную браузерную кнопку назад. Но она, я так понимаю не сработает без navigate(-1)?)

В реальном проекте у нас не будет auth false или true, мы этот аuth получаем асинхронным способом, что делать в этом случае?

Меня почему то при обновлении страницы MainPage выкидывает обратно на Login

@mishanep

2 жыл бұрын

в упрощённом варианте стейт живёт только в оперативке, и при обновлении авторизация слетает. В реальности мы хранили эту инфу в локал сторедж и синхронились бы с ним при обновлении страницы.

useContext тут объясняется наверное лучше чем в специальных видео)) но у меня другая проблема)) так как с сервера через редакс юзер приходит позже, чем отрисовывается компонент, он думает, что юзер не залогинен и всегда возвращает на страницу логина , как решать эту проблему? вариант с токеном в локальной памяти тоже не вариант, не успевает отработать запрос на сервер

@user-pd6wi9iw7m

Жыл бұрын

Привет. Может ты решил данную проблему и можешь рассказать как ее обойти?

@moi-nick-zanyat

Жыл бұрын

@@user-pd6wi9iw7m если честно я уже и не помню))

объясните подробнее пожалуйста кто знает 13:46 на 7строчке - зачем вот такие знаки вопроса после каждого слова? fromPage = location.state?.from?pathname

жаль, отсутствует код урока

А что означает такая запись: .... зачем оборачивать в "пустой элемент" ?

@mishanep

Жыл бұрын

В JavaScript мы можем вернуть в качестве значения только одну сущность. Поэтому в случаях, когда сущностей несколько, их надо во что-то обернуть. Не всегда хочется создавать дополнительную разметку, поэтому существует такая штука как React.Fragment. В данном случае вариант является укороченной записью использования React фрагмента.

@metall1c

Жыл бұрын

@@mishanep дополнительная разметка - имеется ввиду типа блок ?

@mishanep

Жыл бұрын

@@metall1c да

16:43

Код урока бы...

@mishanep

Жыл бұрын

Есть репозиторий под плей-лист github.com/michey85/youtube-react-router-v6

@velikorossnationalist4259

Жыл бұрын

@@mishanep спасибо Михаил!

Добрый день. Вы говорите, что можно реализовать авторизацию через Redux. Как это можно сделать?

@mishanep

2 жыл бұрын

У меня есть пример с Redux-Toolkit и авторизацией с Firebase kzread.info/dash/bejne/m6qoxLR7dc2yh5s.html

Вот зачем убирать useHistory и заменять его на новое название? Нельзя было оставить название

слыш ты. это хлам, а не видео. чё refresh не показал?

Здравствуйте! Подскажите, пожалуйста, выскакивает ошибка: TypeError: Cannot destructure property 'signin' of 'Object(...)(...)' as it is null На строчке: const {signin} = useAuth() в компоненте Loginpage.js Может знаете, с чем это связано? проверяю целый час, все также как и у вас..

@mishanep

2 жыл бұрын

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

@user-cg2vb5ub8d

2 жыл бұрын

@@mishanep Да, убрала начальное значение null и действительно помогло), а еще неправильно передавала Context, исправила, теперь все работает! Спасибо большое!!😊

Супер урок! Спасибо Михаил!