60 - React JS - withRouter, props.match.params
HTML-код
- Опубликовано: 27 сен 2024
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
API: social-network...
URL-адрес, текущий адрес страницы, это тоже ИСТИНА. До этого у нас истиной был BLL (Redux, state), и UI (React) зависел только от него, а сейчас у нас истиной ещё стал и URL-адрес!!!
Чтобы работать с адресом, компоненте нужно получить через props нужные данные. Где их взять в props? С помощью HOC-функции withRouter!
Функция withRouter наподобие функции connect создаёт над отданной ей компонентой ещё одну контейнерную, которая добавит в нашу целевую компоненту через пропсы нужные данные.
В нашем случае нас интересует props.match.params!
Летим!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#withRouter #match #reactjs #практика #примеры #уроки #курс
Я с Димычем уже настолько преисполнился, что как будто бы уже 100 триллионов миллиардов лет проживаю на триллионах и триллионах таких же планет
)))) Бро!
xaxaxaaxx :D
Красиво сказано +++
Я с Димычем в своем познании фронтенда уже настолько преисполнился что я как будто уже сто триллионов миллиардов лет пишу код на триллионах и триллионах таких же реактивных фреймворков как этот React, мне этот JavaScript уже абсолютно понятен и я здесь ищу только одного - чистого кода, умиротворения и вот этой гармонии от статической типизации тайпскрипта, от созерцания великого фрактального подобия и от вот этого замечательного всеединства стейта.= ))))))
@@СергейГурбин-г7к Красава!))
хахаха. ruclips.net/video/UMRNfWSwmPo/видео.html&has_verified=1
Ребята, кто писал проект на react router v6, нужно использовать хуки, а не HOC шаблон. Но по скольку в курсе наша контейнерная компонента ProfileContainer - классовая компонента, то мы не можем использовать хуки в классвовых компонентах. Есть решение из оффициальной документации - создать функцию-обёртку, которая по принципу идентична к withRouter:import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
// wrapper to use react router's v6 hooks in class component(to use HOC pattern, like in router v5)
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
);
}
return ComponentWithRouterProp;
}
И теперь, эту функцию нужно использовать👇
export default connect(mapStateToProps, {setUserProfile})(withRouter(ProfileContainer));
Затем, в классе ProfileContainer мы можем получить айдишку пользователя, прописав:
let profileId = this.props.router.params.profileId;
И все, дальше меняем URL запроса, и обновляем данные профиля в зависимости от айди пользователя
Весто ПрофайлИнфо висит постоянно Прелодер, в чем у меня может быть ошибка?
так Димыч писал -
"let userId = this.props.router.params.userId;"
так вы написали
"let profileId = this.props.router.params.profileId;"
а так все огонь - все работает - подтверждаю!
Спасибо большое что нашли где то такой чудо код и выложили сюда!!
А то я вообще встрял тут - по коментам ниже ничего не мог реализовать.
а есть какое то решение что бы выводило что то по умолчанию когда переходим на страницу профиля ?
потому что если так писать:
path='/profile/:userId?'
- то вообще перестает работать хоть какая то переадресация и в консоле пишет - No routes matched location "/profile"
@@maxim.saharov мне кажется для этого существует useParams, но я не понял как она работает
@@maxim.saharov Можете скинуть код странички целиком? Заранее спасибо)
Чувствую через 30 видосов:
Димыч: "-...ну а для этого мы просто создаём 50-юу контейнерную компоненту"
а потом в следующем, они нам все были не нужны на самом деле, сейчас зарефакторим)
@@Kirdaro ахах)))
1000+ лайков и 0 дизлайков. Я думаю, что это о чем нибудь да говорит. Димыч ты просто супер!
Спасибо вам, ребята!!
до сих пор 0 дизлайков))
тем времени 2к+ лойсов и всего 1 диз
Теперь вместо withRouter можно юзать хуки: useHistory, useLocation, useParams, useRouteMatch.
Спасибо Димыч за инфу. :)
Уже во 2 сезоне об этом рассказываю! ✊
@@ITKAMASUTRA можно ссылку?
@@romanvolovyk968 просто введи путь самурая 2.0, увидишь сразу)
1 сезон пишу сеть с Димычем. Но проект встал , можете подсказать конкретный видос как исправить хуком ?
что бы этот урок заработал нужно установить react-router-dom версию 5, командой npm i react-router-dom@5 тогда появится withRouter
То чувство, когда Димыч просит поставить лайк, а я его поставил сразу после открытия ролика 😳
Димыч я не знаю, читаешь ли ты комменты спустя два года после выпуска своего курса, но все равно напишу: твой труд и старание, которое ты словно передаешь через каждый пиксель моего монитора, заслуживает неиссякаемого потока уважения к тебе! я пока только стучусь в двери большого программирования, но знаю, что с твоей помощью смогу выбивать эту дверь с ноги!) обнял
выбил?
Вот я прохожу сей курс в 01.06.2023 и этот урок один единый код из комментариев, вот честно. Ибо withRouter пришлось написать самому(а точнее скопипастить из коментов, и я очень сильно благодарен людям пишущим решение тех или иных проблем в коментах), и чтобы переходить на свою страницу пользователя пришлось тоже скопипастить код. Но я благодарен Димычу за сей курс видеороликов, ибо столь годный курс ,тяжело найти на просторах интернета да ещё и за бесплатно .
Гайс, не нада никуда откатывать проект. Вот решение:
в контейнерной компоненте между connect и classComponent делаем еще одну функцию:
const TakeParams = (props) => {
return
}
connect должен вызывать TakeParams во вторых скобках, а TakeParams вместо ProfileContainer должен вызывать вашу classComponent (классовую компоненту). Теперь в классовую компоненту передаются пропсы из connect + в пропсах передается свойство param в котором под ключем id есть номер юзера)
Хреновато обьяснил, но пробуйте. Все получится)
Отлично работает, спасибо, насколько понял это "не костыльное" решение применительно к роутердому 6, ежели withRouter нам нужен был только чтобы достать параметры, то это даже лучше)
@@ЮраАндрианов-г2ф да. Это не костыльное решение. Это даже можна сказать современное решение)) Но когда я делал это задание - я совсем не понимал что такое хуки))
@@vityaost если интересно то на 70 уроке, после рефакторинга с компостом,
наш тейк парамс такой:
function TakeParams(props) {
return ;
}
а экспорт такой:
export default compose(
connect(mapStateToProps, {getUserProfile}),
withAuthNavigate
) (TakeParams);
Вдруг пригодится) Хотя конечно хотелось бы тейк парамс засунуть в конвеер компОса, но хз пока как, мы же там пропсы кидаем.
@@ЮраАндрианов-г2ф я дошел до уроков форм и начал более свежие курсы проходить
@@vityaost Быстро, успехов)
Декабрь 2022 Проблема и решение
На сегодняшний момент withRouter больше не поддерживается, да и те решения, которые я нашел в комментариях под этим видео, не совсем решают проблему. В частности, после перехода с profile/userId на просто profile, то не происходит перерисовки на наш профайл.
Решение всех проблем:
1)Пишем его самостоятельно WithRouter, перед компонентной ProfileContainer :
function withRouter(Children){
return(props)=>{
const match = {params: useParams()};
return
}
}
2) вверху соответственно:
import { useParams} from 'react-router-dom';
В функции connect пишем всё как у Димыча
3)Сама компонента ProfileContainer должна выглядить так:
class ProfileContainer extends React.Component {
redirectToMainUser() {
let userId = this.props.match.params.userId;
// let userId = this.props.router.params.userId;
if(!userId) {
userId = 26923; //Пишем Ваш id
}
this.props.getUserProfile(userId);
this.props.getStatus(userId);
}
componentDidMount() {
this.redirectToMainUser();
}
componentDidUpdate(prevProps){
if(this.props.isMain !== prevProps.isMain) {
if(this.props.isMain){
this.redirectToMainUser();
}
}
}
render() {...тут всё без изменений}
4)В app.js пишем так:
На текущий момент всё работает именно так.
На решение проблемы у меня ушло несколько дней.
Что именно мы сделали?
Помимо написания собственного withRouter
1)Добавили атрибут isMain={true} компоненте, чей path="/profile"
2)Теперь, когда у нас выскакивает соответсвующий url то в пропсы прилетает этот атрибут. И если он прилетает, то мы обновляем компоненту. До этого она просто не обновлялась, так как у нас был только componentDidMount, который срабатывал только 1 раз, а ComponentDidUpdate небыло.
3)В ComponentDidUpdate в качестве аргумента приходит два параметра (prevProps, prevState) - предыдущие пропсы и предыдущее состояние (это будет в следующих уроках). Поскольку prevState нам не нужно, то мы принимаем только prevProps. И тут мы просто сравниваем предыдущие пропсы (где атрибута isMain нет) с новыми пропсами(где он соответственно есть). А далее, если он === true, то перерисовываем компоненту (выполняем всё то, что было в compomnentDidMount Димыча)
Кому не совсем понятно что я написал, попытайтесь вникнуть самостоятельно в код, проследить логическую цепочку. На 60 уроке, я думаю, это уже не должно составлять большого труда. Всех с наступающим Новым Годом!)
ппц(, реально, так "кратко" пишется в продакшене? а то чете "слошно"
...у меня способ работает, спс!
Спасибо большое, на основе твоего кода смог решить эту проблему, сильно выручил.Ни как бы не додумался так написать withRouter!!
а где писать про axios.get( бла-бла-бла)? вы кажется забыли
На дворе 2к24, так что лови огромную благодарность из будущего =) Просто снимаю шляпу! Надеюсь на все твои вопросы всегда найдется такой же прекрасный ответ на СтакОверфлоу...
все новое для меня!!! а что знал - то, повторение - мать учения!спасибо Дима за курс
React, withRouter, props.match.params, javascript, спасибо Димыч!)
Не знал, что такое withRouter. Димыч, спасибо за урок!!! #hoc #withRouter #reactjs
withRouter круто обяснил, Спасибо за курс)было бы время я бы все еще раз пересмотрел)
Решил попробовать свои силы после 53 урока. Там меня знатно отпинали по замыканию. Сегодны пришел feedback. Предложили стажировку без оплаты на 1 месяц, а далее всё зависит от меня. Не знаю пока подробностей, но хочу сказать СПАСИБО Димычу. Надеюсь в параллели закончить курс Димыча, чтобы стать самурайчиком и не зафэйлить шанс.
красавчик)
Как успехи, чел?
спасибо , то чего 2 дня не мог сделать благодаоья вам смог )) Огромное спасибо))
Благодарю за такой мегакурс, Дима. Ребята, всем спасибо за комменты, подсказки и варианты готового решения. Гиперреспект!!!
Не знал, что такое withRouter ))) Ох и намучился два часа смотрел пересматривал это полезнейшее видео из курса React Redux
8 месяцев назад, ну и как? трудоустроился?
У кого проблемы в 2022г с withRouter - он в современном мире не используется. Что бы он работал нужно в консоли удалить ДОМ - npm uninstall react-router-dom , А затем установить ДОМ старой версии npm i react-router-dom@5.2.0 . Ели ранее делали роуты в APP.s каким то новым (например обертка Роутерс) способом - придется переделать на старый способ (урок Димыча)
спасибо
Блин, от души спасибо Ман, пол дня ежа на глобус натягивал, пока не откатился до 5.2.0
@@Lok1goD сам долго страдал))
Какой же кайф, что можно до дыр пересматривать ролик до полного понимания происходящего. Спасибо большое за труды!
Не знал что такое withRouter! Лучшие уроки по React & Redux! React
, Redux , курс React, State, Store, Dispatch ,Connect, Action, Route, Provider, Reducer, mapStateToProps, mapDispatchToProps, lessons of React & Redux, курсы по React с практикой, React.Component, Ajax, Axios, pagination, withRouter.
Дмитрий лучший преподаватель, который у меня был когда - либо! Глубокое уважение! Великолепный курс по React - Redux. Склоняюсь перед вашим умом, силой воли и добротой! Так держать!
Не знала что такое withRouter, использовала ConnectedRouter для доступа к match.params.
Классно было узнать как оно было изначально) Спасибо!!!
React JS - withRouter, props.match.params - это круто!
Открыл видос, поставил лайк, написал коммент, теперь можно смотреть спокойно) withRouter не знаю пока
Самые лучшие уроки по React & Redux!
Прикольная тема с пасхалками катаны))). На этот раз над дверью)) React Redux)
Спасибо за видосы! Отлично объясняешь! Всё понятно про withRouter и Router!
Лучший курс React/Redux! Много нового, но и то что уже знал смотреть не скучно
в реакт роутер 6, вместо того чтобы писать оборачивать компоненту с помощью with params, можно внутри контейнерной компоненты вызвать хук UseParams(). Получение UserId будет выглядеть следующим образом:
1. Основной путь.
2. Внутренности компоненты: const { userId } = useParams();
Ну с 8го раза я дошёл до этой серии, по одной серии в день в последний раз начал чтоб осознавать сказанное и заработал этот подход а не галопом.
Очень понятно и доходчиво! Спасибо! Надеюсь, до конца лета будут все 100 выпусков(
Перед просмотром видео про withRouter не знал)
Огромный респект Вам, Дмитрий! Вся информация очень доступна и легко усваивается! Вперед к мечте!
withRouter в копилку! Эти знания очень драгоценны, спасибо за видосы!
Как всегда на высоте :) Спасибо Димыч !!!
пасибо Димыч, разложил по полочкам withRouter ReactJS, withRouter, ContainerComponent, Redux. Современный JS со всеми наворотами и новинками одному навряд ли разгрести. Спасибо Димычу! React Путь самурая - супер курс!!!!
Димыч спасибо , круто обьясняешь . Я сижу кушаю яблочко после удаленки и понимаю ,что ты круче наших учетелей раз в 100.
React JS - withRouter, props.match.params - все круто, все получается, большое спасибо за выпуск !
HOC. Компонента высшего порядка. withRouter. React JS. JavaScript. Лучшие курсы по реакту. Дима, спасибо за курс
Спасибо Димыч, вот и познакомился я с withRouter
кстати было бы класно увидеть список терминов которых надо знать определения
к примеру
React, Redux , SPA, UI, BLL, render, JSX, компонента, callback, ну и так далее))) наверно список около соттни будит
Лучший курс Ract, Redux, Hight Order Component, Connect, WithRouter
Димыч, спасибо за труд!
Спасибо, молодец, так держать
Про withRouter не знал до этого видео)))
Повторно прохожу курс. Как и говорит Димыч, второй раз на перемотке, и всё понятно. Плюс закрываются некоторые дыры в знаниях.
В React Router v6 убрали возможность опциональных путей, насколько я понял, поэтому можно воспользоваться
Спасибо за комент, очень помог!!!
@@ИванБезруков-л3у если ты попробуешь сначала зайти на страницу пользователя (любого), а потом на свою через навлинк в навбаре, у тебя ничего не получится
Теперь знаю про withRouter) 👍 thanks 🙏
Спасибо за курс. withRouter, props.match.params, react, redux.
Сегодня узнали о withRouter, props.match.params
Спасибо, бомбим дальше!
withRouter, props.match.params
СПАСИБО!
Привет! Ничего не знаю о withRouter(-ах), но совсем скоро узнаю))).
А вообще, хочу выразить благодарность Диме за этот курс и за подход! Судя по манере общения, Дима очень хороший человек! Очень классно, что при этом ещё трудолюбивый и талантливый. Успехов тебе в твойм деле. Оно и пользу приносит, и уникальное в своём роде. Ну и конечно же желаю, чтобы вернулось тебе вдвойне ха твои старания в денежном эквиваленте )))
Так же я капец как намучался со следующим: допустим у нас медленная сеть и слева под навбаром отображаются друзья (кликая по которым - мы должны показать profile соответствующего человека). Сеть медленна и пользователь кликает 3-4 запроса подряд: id=1, id=3, id=100, id=2. Я сделал так, чтобы после того, как мне пришел response от axios - я проверяю, что у меня в URL все еще запрашивается тот же самый пользователь, который пришел в ответе. В противном случае - игнорировать ответ сервера (типа он уже не актуален для пользователя).
Но это пол-беды и было не так уж сложно. Но!!! Что если пользователь вызвал axios с profile id=3 и не дождавшись ответа ушел на music, например. Я пропалил по консольке - хотя выполняется componentWillUnmount (т.е. инстанс компоненты убивается, и там я даже делаю редьюсер return { ...initialState }) но axios все равно возвращает свой ответ и записывает свои данные в state (как я понял из-за того, что он асинхронно это делает). В итоге я как-то прописал люгику, что все это работает, но вышло не сильно красиво ... я уверен, что есть куда более нормальный способ это сделать. Жаль, что скорее всего мы его не рассмотрим ...
Идем идем, маленькими шагами вперед! withRouter не знал до выпуска
Для тех, у кого не переходит при клике Navbar Profile на свою страницу, а остается страница пользователя. Есть решение:
Так как по данному роуту рендериться один и тот же компонент, не происходит его размонитрования из dom при смене url.
Поэтому нам стоит добавить метод componentDidUpdate в котором мы будем сравнивать:
componentDidUpdate(prevProps) {
let userId = this.props.router.params.userId
if (prevProps.router.params.userId !== userId) {
let userId = 2
axios.get(//Закиньте ссылку, коммент удаляется)
.then(response => {
this.props.setUserProfile(response.data);
});
}
}
WithRouter, props.match.params!!!
Летим!!!
Спасибо! Не хватило только рассмотреть вопроса парсинга get параметров. как я понял это роутер не делает?
Смотрю Димыч твои видео по несколько раз, первый раз для ознакомления, второй раз когда пишу код, что бы время от времени подсматривать, если что то не получается смотрю третий раз
Всем привет! В дополнение к посту ptlatka: в react router 6 не срабатывает параметр по умолчанию в . Для того, чтобы нормально отобразилась страница по умолчанию нужно просто добавить еще один Route:
.
.
.
если ты попробуешь сначала зайти на страницу пользователя (любого), а потом на свою через навлинк в навбаре, у тебя ничего не получится
@@Rakhmankuloff-c7b А как быть тогда, не подскажешь,
Самые лучшие уроки по React & Redux!
просто ЛУЧШИЙ !!!
withRouter, props.match.params
Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!
withRouter, первый раз слышу, я вообще много чего на этом канале первый раз слышу так как начал с нуля
Перед просмотром не знал что такое withRouter, спасибо огромное за твой труд! Лайк сразу зашел) Смотрю дальше!
Можно переделать в конце ролика проверку userId на более локаничную. Вместо
let userId = this.props.match.params.userId;
if (!userId) {
userId = 2;
}
написать
const userId = this.props.match.params.userId || 2;
А ещё есть баг - если перейти на чей-то профайл, а потом в навбаре клацнуть профайл, чтобы посмотреть свой профайл, то перерисовка не произойдёт и ничего не поменяется=(
есть решение исправить баг?
@@nikitagaponov тоже вижу это баг, не перерисовывается при переходе по ссылкам из NavBar'а. Решения нет
Самое лучшее видео на курсе. Ради этого и проходил этот курс. Боже, это так прикольно. хочу пересматривать этот видос раз 100 и повторять withRouter. уиии
connect (прокидывает данные из store) => withRouter (прокидывает данные из URL) => ContainerComponent (делаем ajax-запросы, прокидываем props в презентационную компоненту) => презентационная компонента
Не представляю, откуда столько энергии и мотивации делать такие крутые уроки еще и бесплатно, но я все же решился пойти на платное, инкубатор это просто лучшее место для обучения!
Ее, бро! Доведём тебя до конца!
*--2021--*
В ноябре 21 react-router-dom обновил версию на 6, если Вы, как и я, не хотите откатываться на 5, то вот моё решение:
Файл App.js:
*читать ниже в ответе, ютуб блочит*
@@in_the_fox_fur а почему connect два раза?
@@ДенисУалинов соррян, убрала. Connect должен быть один )
Комментарий постоянно блочило, я не сразу поняла, что дело в ссылке, в попытках его всё же оставить, не заметила, что строчка задублировалась
Спасибо Димыч! Все понял, пойду на практике отработаю и дальше полечу!
React JS - withRouter, props.match.params
Про withRouter не знал, а потому с большим удовольствием посмотрю
Когда выучу реакт - открою свою школу " Путь Шаолиня" .
сморозил конечно знатно, петросян v.2
не остри аж так)
оказывается WithRouter это просто ! :) лучший курс по React + Redux
Димыч спасибо , круто обьясняешь . Я сижу кушаю яблочко после удаленки и понимаю ,что ты круче наших учетелей раз в 100.
не знал раньше про withRouter(), теперь знаю, предельно понятно объясняешь, спасибо за это!)
withRouter удобная штука, не знал, оказывается можно не прокидывать props.match через все дерево компонентов, спасибо!
Димыч, не знаю пока что такое withRouter, так что побежал снимать видео с паузы и досматривать!
Я не знал что такое With router до просмотре этого видео. Спасибо Димыч за твои уроки
про withRouter, я не знал! Первый раз так плотно учу React.js, хотя самим программированием далеко не первый раз сталкиваюсь.
Thanks!
The best lessons of React & Redux!!!
React , Redux, State, Store, Dispatch ,Connect, Action, Route, Reducer, Props
withRouter, react, redux, курс просто бомба. Димыч лучший! Лучший курс по React Redux на планете
Спасибо!
withRouter, props.match.params
К сожалению, не знал, но уверен, что после просмотра смогу так мастерски им пользоваться как Димыч катаной)
После часа гугления в инете, попадается как раз твое видео, и сразу то что нужно. Спасибо!
#withRouter #reactjs #react #js
Ууууу, чуть голова не лопнула от огромного количества повторений компонента в компоненте которая в компоненте , и та тоже в компоненте , и компонента в еще одной компоненте. Звучит это все как то так: «На море на океане есть остров, на том острове дуб стоит, под дубом сундук зарыт, в сундуке - заяц, в зайце - утка, в утке - яйцо, в яйце - игла, - познаешь React»
withRouter что? не, не слышал, сейчас Димыч расскажет и буду знать! Спасибо за офигенный курс! :)
Все супер идем дальше #react #redux #withRouter
Учусь у Димыча в инкубаторе. Шикарная команда у него, супер атмосфера!! +1000 лайков)))
Ура, 60 уроков позади 💪Спасибо! React, redux, withRouter
Спасибо Дима, что объяснил про match и params
супер,теперь знаю что такое withRouter
спасибо Димычу за курс и ребятам, которые пишут апдейты по обновленному стеку!
Шаолинем можешь ты не быть, но самураем стать обязан!
Огромное спасибо,что повторяешь,повторяешь и повторяешь.это очень помогает
HOC, WithRouter, connect, props.match.params, лучшие объяснения React!
Лучший сенсей, наставник, учитель и просто отличный мужик!
Много полезного узнал про hoc whithRouter) Thanks! 💪 👍🏼
До этого видео не знала, что такое withRouter
WithRouer зашел проще , чем connect . Спасибо , двигаемся дальше
Лучший курс Ract, Redux, HOC, Connect, WithRouter
Димыч, спасибо за труд!
Не знала, что такое withRouter. Дима, спасибо за урок!!! #hoc #withRouter #reactjs
Не знал, что такое withRouter. Смотрим видос, и летим дальше)
Огромный респект за этот курс, даже имея опыт в реакте, много чего нового подчерпываю, особенно какие-то архитектурные вещи, которых я не нашел даже на многих платных курсах.
Важно прочитать: на севодня withRouter - удален из react-router-dom (начиная из 6 версии библиотеки). Штоби получать информацию из поисковой строки нужно юзать хук useParams, но у меня возникали проблеми в сочетании з класовой компонентой. Итог : если ти смотриш етот тутор очень в будущем тебе нужно загуглить што такое: useEffect(он используетса вместо componentDidMount в стрелочник компонентах) и useParams(по сути функция которая возвращает параметр поисковой строки)
Создал поверх классовой контейнерную компоненту, прописал хук и все работает, спасибо)