60 - React JS - withRouter, props.match.params

[@yuriipidlisnyi2248]

Ребята, кто писал проект на 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 запроса, и обновляем данные профиля в зависимости от айди пользователя

[@МарияПронина-н4у]

Весто ПрофайлИнфо висит постоянно Прелодер, в чем у меня может быть ошибка?

[@maxim.saharov]

так Димыч писал - "let userId = this.props.router.params.userId;" так вы написали "let profileId = this.props.router.params.profileId;" а так все огонь - все работает - подтверждаю! Спасибо большое что нашли где то такой чудо код и выложили сюда!! А то я вообще встрял тут - по коментам ниже ничего не мог реализовать.

[@maxim.saharov]

а есть какое то решение что бы выводило что то по умолчанию когда переходим на страницу профиля ? потому что если так писать: path='/profile/:userId?' - то вообще перестает работать хоть какая то переадресация и в консоле пишет - No routes matched location "/profile"

[@user-zn3wi5cu9p]

@@maxim.saharov мне кажется для этого существует useParams, но я не понял как она работает

[@МарияПронина-н4у]

@@maxim.saharov Можете скинуть код странички целиком? Заранее спасибо)

[@ІгорСнігур-х1л]

Я с Димычем уже настолько преисполнился, что как будто бы уже 100 триллионов миллиардов лет проживаю на триллионах и триллионах таких же планет

[@ITKAMASUTRA]

)))) Бро!

[@vitektychowski5220]

xaxaxaaxx :D Красиво сказано +++

[@СергейГурбин-г7к]

Я с Димычем в своем познании фронтенда уже настолько преисполнился что я как будто уже сто триллионов миллиардов лет пишу код на триллионах и триллионах таких же реактивных фреймворков как этот React, мне этот JavaScript уже абсолютно понятен и я здесь ищу только одного - чистого кода, умиротворения и вот этой гармонии от статической типизации тайпскрипта, от созерцания великого фрактального подобия и от вот этого замечательного всеединства стейта.= ))))))

[@АртурШогенов-ч8ы]

@@СергейГурбин-г7к Красава!))

[@artempavlenko5147]

хахаха. kzbin.info/www/bejne/i361f5mNiNyghtE&has_verified=1

[@ИгорьФесик-ж7н]

Чувствую через 30 видосов: Димыч: "-...ну а для этого мы просто создаём 50-юу контейнерную компоненту"

[@Kirdaro]

а потом в следующем, они нам все были не нужны на самом деле, сейчас зарефакторим)

[@DubinArtur]

@@Kirdaro ахах)))

[@feodor7691]

У кого не работает, продублирую путь решения 1. import { useParams } from 'react-router-dom'; - нужно это просто сверху импортировать 2. export function withRouter(Children){ return(props)=>{ const match = {params: useParams()}; return } } - добавить это перед классовой компонентой Остальное делаем как Димыч Как я понял, суть решения в том, что мы используем Хук - UseParams, он позволяет достучаться до url Но так как нельзя хуки и классы мешать, мы берем и заворачиваем наш хук в функцию, далее из функции, которая как раз совпадает с нерабочим withRouter

[@MaksTrueman]

Чел, харош!

[@СветланаАндреевна-х8р]

спасибо

[@alluresport3552]

Thx

[@olenakunina1]

спасибище, так не хотелось прерываться и искать во втором курсе как решить эту проблему, и так в голове салат

[@Hamafac]

так же в App.js

[@akionka]

28:39 Контейнерная компонента на контейнерной компоненте едет, контейнерной компонентой погоняет

[@OlegMavlyutov]

То чувство, когда Димыч просит поставить лайк, а я его поставил сразу после открытия ролика 😳

[@vseslavr]

1000+ лайков и 0 дизлайков. Я думаю, что это о чем нибудь да говорит. Димыч ты просто супер!

[@ITKAMASUTRA]

Спасибо вам, ребята!!

[@VSsoviet]

до сих пор 0 дизлайков))

[@bbbh_615]

тем времени 2к+ лойсов и всего 1 диз

[@ОлегСергеев-й9с]

Решил данный вопрос следующим способом: ProfileCantainer.js _______________________________________________________ import React, {useEffect} from 'react'; import {connect} from "react-redux"; import Profile from "./Profile"; import axios from "axios"; import {useParams} from "react-router-dom"; import {setUserProfile} from "../redux/profile-reducer"; function ProfileContainer(props) { let { userId } = useParams(); if (!userId) { userId = 2; } useEffect(() => { axios .get(`social-network.samuraijs.com/api/1.0/profile/` + userId) .then((response) => { props.setUserProfile(response.data); }); }, [userId]); return ( ); } let mapStateToProps = (state)=> ({ profile: state.profilePage.profile }) export default connect (mapStateToProps, {setUserProfile})(ProfileContainer) App.js ___________________________________________________________________ ... ...

[@aliyushka_vatrushka]

Спасибо! Отличное решение!!!

[@nh42so42]

еслинт не будет ругаться, если в useEffect будет [props, userId] вместо [userId], но все и так работает. осталось вникнуть, потому что я скопипастил и заработало. спасибо

[@efremandre]

ох и намучался я с этим withRouter(), потому что сейчас он не работает. Спасибо комментариям, но пришлось два раза пересмотреть этот и предыдущий видосы, чтобы вникнуть в саму суть действия... Надо еще на свежую голову повторить сработал следующий код из комментариев, продублирую: // перед классовой компонентой ProfileContainer import {useParams} from "react-router-dom"; export function withRouter(Children){ return(props)=>{ const match = {params: useParams()}; return } } class ProfileContainer extends React.Component { // код компоненты из видоса } const mapStateToProps = (state) => { // код mapStateToProps из видоса } const WhitsUrlContainerComponent = withRouter(ProfileContainer) export default connect(mapStateToProps, {setUsersProfile, toggleFetching})(WhitsUrlContainerComponent) // в App.js прописываем так // в User компоненте, в NavLink в пути надо прописать айдишник из state Go to Profile // этот момент я долго упускал из виду и все ломалось, так как сам айдишник не получал

[@КириллГекман-к2м]

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

[@Alexei-sb6kz]

toggleFetching откуда взял, мы ж такого в профайл-редюсере не создавали до 60 урока точно.

[@Nurazbayev]

спасибо большое, очень помог, работает!

[@user-ov8mx3ej4z]

Декабрь 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 уроке, я думаю, это уже не должно составлять большого труда. Всех с наступающим Новым Годом!)

[@YaroslavEx]

ппц(, реально, так "кратко" пишется в продакшене? а то чете "слошно" ...у меня способ работает, спс!

[@vladislavkhantaev3343]

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

[@kseniiaefremova4696]

а где писать про axios.get( бла-бла-бла)? вы кажется забыли

[@RebooT_Channel]

На дворе 2к24, так что лови огромную благодарность из будущего =) Просто снимаю шляпу! Надеюсь на все твои вопросы всегда найдется такой же прекрасный ответ на СтакОверфлоу...

[@evgeniyn1542]

Теперь вместо withRouter можно юзать хуки: useHistory, useLocation, useParams, useRouteMatch. Спасибо Димыч за инфу. :)

[@ITKAMASUTRA]

Уже во 2 сезоне об этом рассказываю! ✊

[@romanvolovyk968]

@@ITKAMASUTRA можно ссылку?

[@Neurdan]

@@romanvolovyk968 просто введи путь самурая 2.0, увидишь сразу)

[@МаксимКоробков-программисттрей]

1 сезон пишу сеть с Димычем. Но проект встал , можете подсказать конкретный видос как исправить хуком ?

[@sarsenm5874]

что бы этот урок заработал нужно установить react-router-dom версию 5, командой npm i react-router-dom@5 тогда появится withRouter

[@IgorIckra]

Вот я прохожу сей курс в 01.06.2023 и этот урок один единый код из комментариев, вот честно. Ибо withRouter пришлось написать самому(а точнее скопипастить из коментов, и я очень сильно благодарен людям пишущим решение тех или иных проблем в коментах), и чтобы переходить на свою страницу пользователя пришлось тоже скопипастить код. Но я благодарен Димычу за сей курс видеороликов, ибо столь годный курс ,тяжело найти на просторах интернета да ещё и за бесплатно .

[@airpodsclub6443]

в реакт роутер 6, вместо того чтобы писать оборачивать компоненту с помощью with params, можно внутри контейнерной компоненты вызвать хук UseParams(). Получение UserId будет выглядеть следующим образом: 1. Основной путь. 2. Внутренности компоненты: const { userId } = useParams();

[@alexZP]

У кого проблемы в 2022г с withRouter - он в современном мире не используется. Что бы он работал нужно в консоли удалить ДОМ - npm uninstall react-router-dom , А затем установить ДОМ старой версии npm i react-router-dom@5.2.0 . Ели ранее делали роуты в APP.s каким то новым (например обертка Роутерс) способом - придется переделать на старый способ (урок Димыча)

[@automanautomation9845]

спасибо

[@Lok1goD]

Блин, от души спасибо Ман, пол дня ежа на глобус натягивал, пока не откатился до 5.2.0

[@alexZP]

@@Lok1goD сам долго страдал))

[@filippnarayev122]

Думал выучи что такое withRouter, в итоге в дополнение выучил еще и useParams и useEffects, огонь)

[@КотМатроскин-х9ь]

Привет. Лайк поставил. Про withRouter ничего не знал, а пока в доку лезть не стал. А то после доки хочется выпрыгнуть в окно...

[@__online7250]

🤩React JS - withRouter, props.match.params

[@vityaost]

Гайс, не нада никуда откатывать проект. Вот решение: в контейнерной компоненте между connect и classComponent делаем еще одну функцию: const TakeParams = (props) => { return } connect должен вызывать TakeParams во вторых скобках, а TakeParams вместо ProfileContainer должен вызывать вашу classComponent (классовую компоненту). Теперь в классовую компоненту передаются пропсы из connect + в пропсах передается свойство param в котором под ключем id есть номер юзера) Хреновато обьяснил, но пробуйте. Все получится)

[@ЮраАндрианов-г2ф]

Отлично работает, спасибо, насколько понял это "не костыльное" решение применительно к роутердому 6, ежели withRouter нам нужен был только чтобы достать параметры, то это даже лучше)

[@vityaost]

@@ЮраАндрианов-г2ф да. Это не костыльное решение. Это даже можна сказать современное решение)) Но когда я делал это задание - я совсем не понимал что такое хуки))

[@ЮраАндрианов-г2ф]

@@vityaost если интересно то на 70 уроке, после рефакторинга с компостом, наш тейк парамс такой: function TakeParams(props) { return ; } а экспорт такой: export default compose( connect(mapStateToProps, {getUserProfile}), withAuthNavigate ) (TakeParams); Вдруг пригодится) Хотя конечно хотелось бы тейк парамс засунуть в конвеер компОса, но хз пока как, мы же там пропсы кидаем.

[@vityaost]

@@ЮраАндрианов-г2ф я дошел до уроков форм и начал более свежие курсы проходить

[@ЮраАндрианов-г2ф]

@@vityaost Быстро, успехов)

[@egorepir]

#withRouter #reactjs #react #js Ууууу, чуть голова не лопнула от огромного количества повторений компонента в компоненте которая в компоненте , и та тоже в компоненте , и компонента в еще одной компоненте. Звучит это все как то так: «На море на океане есть остров, на том острове дуб стоит, под дубом сундук зарыт, в сундуке - заяц, в зайце - утка, в утке - яйцо, в яйце - игла, - познаешь React»

[@volleyballist91]

Димыч я не знаю, читаешь ли ты комменты спустя два года после выпуска своего курса, но все равно напишу: твой труд и старание, которое ты словно передаешь через каждый пиксель моего монитора, заслуживает неиссякаемого потока уважения к тебе! я пока только стучусь в двери большого программирования, но знаю, что с твоей помощью смогу выбивать эту дверь с ноги!) обнял

[@bekbulatbekeyev5058]

выбил?

[@МаксимМинаков-я9о]

Ну с 8го раза я дошёл до этой серии, по одной серии в день в последний раз начал чтоб осознавать сказанное и заработал этот подход а не галопом.

[@ivansamoiliuk5451]

withRouter, props.match.params, react, redux, проект с нуля. Димыч - красавчик!)

[@someChicoRy]

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

[@sashaya6114]

React, withRouter, props.match.params, javascript, спасибо Димыч!)

[@__online7250]

26:08 минута кода - вот так тоже работает const userId = this.props.match.params.userId || 2

[@fox1k711]

"react-router-dom": "^6.4.0". рабочий код, стр профиля работает, отображает юзера с айди 2, после переходов по навбару так же работает. > import React from 'react'; import Profile from './Profile'; import axios from 'axios'; import { connect } from 'react-redux'; import { setUserProfile } from '../../redux/profileReducer'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; class ProfileContainer extends React.Component { componentDidMount() { let userId = this.props.router.params.userId; if (!userId) userId = 2; axios ВВЕДИТЕ СВОЙ URL САМОСТОЯТЕЛЬНО ! .get(`.../profile/${userId}`) .then((res) => { this.props.setUserProfile(res.data); }); } componentDidUpdate(prevProps) { let userId = this.props.router.params.userId; if (prevProps.router.params.userId !== userId) { let userId = 2; axios ВВЕДИТЕ СВОЙ URL САМОСТОЯТЕЛЬНО ! .get(`.../profile/${userId}`) .then((res) => { this.props.setUserProfile(res.data); }); } } render() { return ; } } const mapStateToProps = (state) => ({ profile: state.profilePage.profile, }); 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) ); > нужно добавить еще один путь Для друга : Mиха тюбик ;D

[@MJstart]

Дружищееее, ты мне очень помог. Я два часа бился над проблемой. У меня была ошибка 'no routes matched location'. По твоему совету помимо первого роута я добавил еще и второй. Добавить только один роут не получается почему то. Почему то react принимает вопросительный знак после параметра userId в роуте как какую то ошибку и воспринимает никак. Интересно почему

[@around007]

Огромное тебе человеческое спасибо!

[@viktorshatalov1920]

все новое для меня!!! а что знал - то, повторение - мать учения!спасибо Дима за курс

[@АнастасияВорон-б7ю]

connect (прокидывает данные из store) => withRouter (прокидывает данные из URL) => ContainerComponent (делаем ajax-запросы, прокидываем props в презентационную компоненту) => презентационная компонента

[@mrfun9841]

спасибо , то чего 2 дня не мог сделать благодаоья вам смог )) Огромное спасибо))

[@karway211]

Не знал что такое 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.

[@yuryhouse4226]

Решил попробовать свои силы после 53 урока. Там меня знатно отпинали по замыканию. Сегодны пришел feedback. Предложили стажировку без оплаты на 1 месяц, а далее всё зависит от меня. Не знаю пока подробностей, но хочу сказать СПАСИБО Димычу. Надеюсь в параллели закончить курс Димыча, чтобы стать самурайчиком и не зафэйлить шанс.

[@vityaost]

красавчик)

[@alro1392]

Как успехи, чел?

[@Kostiantyn_S.]

Шаолинем можешь ты не быть, но самураем стать обязан!

[@Vllad_Ko]

Не знал, что такое withRouter ))) Ох и намучился два часа смотрел пересматривал это полезнейшее видео из курса React Redux

[@_e_mask]

8 месяцев назад, ну и как? трудоустроился?

[@motooven]

*60 - React JS - withRouter, props.match.params* помощь Димону

[@amaxe12345]

Не знал, что такое withRouter. Димыч, спасибо за урок!!! #hoc #withRouter #reactjs

[@ДенисБеспалов-п8щ]

Не знал, что такое withRouter, и не поверите, ровно перед этим видео я остановился в своём паралельном проекте на вопросе "хм, а как правильно отобразить страницу товара по которому кликнули?". Подумал, решу завтра, а сейчас перед сном еще 1 видос и тут БАЦ! А Димыч ровно про это рассказывает! Ух не лягу я сегодня спать) withRouter props match

[@bakelev]

React JS - withRouter, props.match.params - это круто!

[@МихаилКарамзин-ы1д]

WithRouter, props.match.params!!! Летим!!!

[@АртурАнтисептик]

Для тех, у кого не переходит при клике 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); }); } }

[@Akira-cy7su]

спасибо useParams, useLocation, useHistory, хуки сила wuthRouter могила!!!

[@DmytroLazarenko]

withRouter круто обяснил, Спасибо за курс)было бы время я бы все еще раз пересмотрел)

[@ValeriiYanchev]

Я человек простой, смотрю видос - ставлю лайк

[@АлександрВолков-о8ю]

Более простой способ для react router v6! Для тех, кто пишет проект на react router v6, HOC withRouter теперь нету и необходимо использовать hook - useParams: Он не работает в классовых компонент, поэтому самый простой способ - это сделать функциональную обёрточную компоненту: Например: const WithRouterComponent = (props) => { const params = useParams(); return ( ); } И потом просто подать его на connect export default connect(mapStateToProps, {setUserProfile} )(WithRouterComponent) А в ProfileContainer export class ProfileContainer extends React.Component { componentDidMount() { // this.props.userId - наша переданная id из url :) axios.get(`.../api/1.0/profile/${this.props.userId}`) .then(res => { this.props.setUserProfile(res.data); } ) } render() { ... } }

[@АлексейЧеб-щ7ь]

у меня не запускается метод componentDidMount, когда я перехожу с profile/12 на /profile. То есть у меня запускается метод render для ProfileComponent с userId = undefined, а данные для профиля остаются теми что и при прошлом рендере. В общем нет второго запроса на сервер, который бы мне отдал ту страничку с id = 2. Есть какие-то мысли

[@TENSEI_mlbb]

Спасибо очень мне помог 4.11.2024

[@sergsergey4251]

Практика, примеры, большой проект на React JS. WithRouter, props.match.params. Бомбим дальше ©

[@Багвматрицегребанойреальности]

withRouter React, полезная информация!!!

[@magomed_official]

withRouter withRouter withRouter withRouter withRouter withRouter withRouter withRouter. Полезный HOC!

[@АртемКулинский-ю4о]

Дмитрий лучший преподаватель, который у меня был когда - либо! Глубокое уважение! Великолепный курс по React - Redux. Склоняюсь перед вашим умом, силой воли и добротой! Так держать!

[@olegcvetkov8012]

До просмотра видео не знал что такое withRouter)

[@ILyxaFedoseev]

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

[@aleksandrzelenskiy4000]

Идем идем, маленькими шагами вперед! withRouter не знал до выпуска

[@fantast2568]

Как всегда на высоте :) Спасибо Димыч !!!

[@mistrz7856]

Сегодня узнали о withRouter, props.match.params Спасибо, бомбим дальше!

[@kub1k]

Самые лучшие уроки по React & Redux!

[@Ангелина-ю5ц7м]

Ничего не знала о withRouter до этого видео урока. react redux

[@ЯрославФедан-щ1к]

Спасибо, молодец, так держать

[@xtereone]

Перед просмотром видео про withRouter не знал)

[@Dozortsev]

Спасибо за видосы! Отлично объясняешь! Всё понятно про withRouter и Router!

[@tema_skakun]

я не знал про withRouter) разработчики реакта постоянно что то меняют в библиотеке. большое спасибо ребятам, в комментариях быстро нашёл актуальное решение проблемы. с документацией тоже ознакомился, но там всегда так много пишут))

[@andreityryshkin3784]

кстати было бы класно увидеть список терминов которых надо знать определения к примеру React, Redux , SPA, UI, BLL, render, JSX, компонента, callback, ну и так далее))) наверно список около соттни будит

[@gregorytorshin2574]

Открыл видос, поставил лайк, написал коммент, теперь можно смотреть спокойно) withRouter не знаю пока

[@mikhail_shokun]

Сообщение тем, у кого не работает withRouter, в конце 2021 года вышла 6 версия react-router, и в ней withRouter не работает, есть вариант откатить версию до 5.2.0(прописывается это в package.json потом npm install) и работать дальше с withRouter или второй вариант, будет в ответах ниже Всем привет. Я в Харькове, 16 марта 2022, пытаюсь бомбить реакт, а за окном бомбят Харьков((( очень тяжело сосредоточиться, или постоянные взрывы отвлекают, или новости, или звоню жене, которая все никак не пересечет границу Украины, в общем, Димыч, я знаю что ты очень за нас переживаешь, видел твои стримы.

[@mikhail_shokun]

в файле ProfileContainer пишем: import React from 'react'; import * as axios from 'axios'; import { connect } from 'react-redux'; import { useMatch } from 'react-router-dom'; import { setUserProfile } from '../../redux/profileReducer'; import Profile from './Profile'; class ProfileContainer extends React.Component { componentDidMount() { let userId = this.props.match ? this.props.match.params.userId : 2; axios.get(`social-network.samuraijs.com/api/1.0/profile/${userId}`).then(({ data }) => { this.props.setUserProfile(data); }); } render() { return ( ); } } const ProfileURLMatch = (props) => { const match = useMatch('/profile/:userId/'); return ; } const mapStateToProps = (state) => ({ profile: state.profilePage.profile, }); export default connect(mapStateToProps, { setUserProfile })(ProfileURLMatch);

[@mikhail_shokun]

В файле App.js пишем:

[@sheshko_pavel]

Спасибо огромное за решение

[@КонстантинСабанин-ь3я]

Попробую описать происходящее: 🔹 в самой нижней строке _connect_ передает *props* в _ProfileURLMatch_ (а не в _ProfileContainer_ как было раньше) 🔹 в функции _ProfileURLMatch_ мы объявляем переменную _match_ и кладем в нее то, что вернет _useMatch()_ 🔹 затем _ProfileURLMatch_ ретурнит тот самый _ProfileContainer_ , который до этого был в коннекте, но только теперь с новыми пропсами, а именно добавляется свойство *match* , в котором будет лежать переменная _match_ По сути проделано то же самое, что Димыч объясняет на видео. Также взяли _ProfileContainer_ и обернули его новой контейнерной компонентой _ProfileURLMatch_ , ну и прокинули через нее пропсы, параллельно добавив новый пропс *match*

[@МарияПронина-н4у]

@@КонстантинСабанин-ь3я Как из match достать юзерайди? Типа так userId = this.props.match.params.userId ?

[@tret40]

withRouter, первый раз слышу, я вообще много чего на этом канале первый раз слышу так как начал с нуля

[@janechaus4630]

Огромный респект Вам, Дмитрий! Вся информация очень доступна и легко усваивается! Вперед к мечте!

[@TatsianaChorba]

функции высшего порядка, компоненты-контейнеры, React JS, withRouter, props.match.params

[@gorillatv577]

Очень понятно и доходчиво! Спасибо! Надеюсь, до конца лета будут все 100 выпусков(

[@katecosiness]

перед просмотром не знала, что такое withRouter )

[@genapolyakov]

немного изменился синтаксис Пишем в App.js: в ProfileContainer.jsx: import { useParams } from "react-router-dom"; class ProfileContainer extends React.Component { componentDidMount (){ let userId = this.props.params.userId; if (!userId) { userId = 2; } .... (дальше как у Димыча) .... (и меняем withRouter) на такую функцию: let WithUrlDataContainerComponent = (props) => { return ( ) }

[@genapolyakov]

withRouter не работает теперь

[@dimadiv6583]

Спасибо! Твоим методом сделал

[@andreyonischuk5058]

СПАСИБО, три часа буковки сверял...

[@Goboz1]

от души

[@СергейАвраменко-с3м5у]

спасибо бро

[@РоманТитов-ч8и]

Я не знаю что такое withRouter, но сейчас посмотрю АйтиКамасутра от Димыча и узнаю. Летим!

[@HeavyHeavyvich]

Огромное спасибо. Вопрос по поводу стора: стоит ли всегда глобальный юзать,или стоит как-то разделить на локальный (компоненты) и глобальный (редакс)? Ну типа как правильнее. Ведь можно всегда хуки заюзать, и будет локальный стор,но тогда при нужде будет весело прокидывать пропсы наверх. Или же придется использовать глобальный стор впоследствии. Так все-таки как посоветуешь? Мне кажется более удобным сначала юзать глобальный стор. Потом, когда приложуха подходит к завершению разработки, можно уже попытаться некоторые стейты вытащить в локальные. Это,мне кажется,сделать будет проще,чем идти в обратную сторону. Как ты на практике делаешь?

[@ITKAMASUTRA]

Глобальный стейт - основной стейт! Так как приложение большое и мы хотим управлять стейтом централизованно! Локальный стейт будем использовать для локальных фишек внутри компоненты, для тех вещей, которые сложно отнести к бизнес логике! (Например гармошка - скукожена или раскукожена)

[@aidosbatyrkulov3272]

Все супер идем дальше #react #redux #withRouter

[@regedam7559]

В React Router v6 убрали возможность опциональных путей, насколько я понял, поэтому можно воспользоваться

[@ИванБезруков-л3у]

Спасибо за комент, очень помог!!!

[@Rakhmankuloff-c7b]

@@ИванБезруков-л3у если ты попробуешь сначала зайти на страницу пользователя (любого), а потом на свою через навлинк в навбаре, у тебя ничего не получится

[@MrYehBr]

Не знал об withRouter, пытался нагавнокодить другими путями еще на прошлом видосе. Спасибо, Димыч :)

[@ИльяИваник-ф8ф]

Так же я капец как намучался со следующим: допустим у нас медленная сеть и слева под навбаром отображаются друзья (кликая по которым - мы должны показать profile соответствующего человека). Сеть медленна и пользователь кликает 3-4 запроса подряд: id=1, id=3, id=100, id=2. Я сделал так, чтобы после того, как мне пришел response от axios - я проверяю, что у меня в URL все еще запрашивается тот же самый пользователь, который пришел в ответе. В противном случае - игнорировать ответ сервера (типа он уже не актуален для пользователя). Но это пол-беды и было не так уж сложно. Но!!! Что если пользователь вызвал axios с profile id=3 и не дождавшись ответа ушел на music, например. Я пропалил по консольке - хотя выполняется componentWillUnmount (т.е. инстанс компоненты убивается, и там я даже делаю редьюсер return { ...initialState }) но axios все равно возвращает свой ответ и записывает свои данные в state (как я понял из-за того, что он асинхронно это делает). В итоге я как-то прописал люгику, что все это работает, но вышло не сильно красиво ... я уверен, что есть куда более нормальный способ это сделать. Жаль, что скорее всего мы его не рассмотрим ...

[@asdfaw9145]

withRouter, props.match.params СПАСИБО!

[@miraigrafit7865]

В react-router-dom v6 убрали withRouter, вместо него, можно использовать useMatch или возвращаться на 5 версию. Лично я сделал еще одну контейнерную компененту и закинул туда useMath, потом в ретурне передавал классовой компоненте данные через пропсы

[@SamSturdy]

можешь скинуть код как ты сделал , пожалуйста , а то у меня что-то не получается

[@miraigrafit7865]

@@SamSturdy import React from "react"; import Profile from "./Profile"; import { connect } from "react-redux"; import { addPost, updatePostArea, getProfileThunk } from '../../Redux/reducers/profile-reducer.js'; import { useMatch } from "react-router-dom"; class ProfileAPI extends React.Component { componentDidMount() { let userId = this.props.match ? this.props.match.params.userId : '20875'; this.props.getProfileThunk(userId); } render() { return ( ) } } const ProfileMatch = (props) => { let match = useMatch("/profile/:userId/"); return ( ) } export default connect(mapStateToProps, { addPost, updatePostArea, getProfileThunk })(ProfileMatch );

[@adambenson5098]

@@miraigrafit7865 при клике не изменяется аватарка в профиле, что нужно сделать? (Возможно в Users, Navlink чтото )

[@adambenson5098]

и как написал getProfileThunk

[@miraigrafit7865]

@@adambenson5098 это у вас дальше по курсу будет

[@braivs]

HOC withRouter. Летим в космос и другие реальности)

[@СергейЛогинов-ж9ж]

Спасибо! Не хватило только рассмотреть вопроса парсинга get параметров. как я понял это роутер не делает?

[@dlucky13]

Прикольная тема с пасхалками катаны))). На этот раз над дверью)) React Redux)

[@fargutvest]

withRouter удобная штука, не знал, оказывается можно не прокидывать props.match через все дерево компонентов, спасибо!

[@АлександрТыршу-р5с]

Можно переделать в конце ролика проверку userId на более локаничную. Вместо let userId = this.props.match.params.userId; if (!userId) { userId = 2; } написать const userId = this.props.match.params.userId || 2; А ещё есть баг - если перейти на чей-то профайл, а потом в навбаре клацнуть профайл, чтобы посмотреть свой профайл, то перерисовка не произойдёт и ничего не поменяется=(

[@nikitagaponov]

есть решение исправить баг?

[@ЮрийО-ч3ю]

@@nikitagaponov тоже вижу это баг, не перерисовывается при переходе по ссылкам из NavBar'а. Решения нет

[@TRIZ-Bogatyregold]

Практически каждое видео, Димыч начинает с объяснений про связку между BLL -> UI и single responsibility principle! Нет варианта не понять про это!

[@abazunts]

Спасибо Димыч за отличный видос. Подскажи плиз один момент, когда ты оборачивал компоненту ты создал отдельную переменную, я так понимаю это просто для понимания. Можно ли писать сразу connect(mstp,mdtp)(withRouter(User))?

[@ITKAMASUTRA]

Да, я промежуточный вариант нагородил для большей наглядности!!! 🙏

[@Khazanalexey]

круто!!

[@6ajkermexx591]

Про withRouter не знал до этого видео)))

[@in_the_fox_fur]

*--2021--* В ноябре 21 react-router-dom обновил версию на 6, если Вы, как и я, не хотите откатываться на 5, то вот моё решение: Файл App.js: *читать ниже в ответе, ютуб блочит*

[@ДенисУалинов]

@@in_the_fox_fur а почему connect два раза?

[@in_the_fox_fur]

@@ДенисУалинов соррян, убрала. Connect должен быть один ) Комментарий постоянно блочило, я не сразу поняла, что дело в ссылке, в попытках его всё же оставить, не заметила, что строчка задублировалась

[@АндрейДарменко-й8щ]

Да, Димыч... . С тобой не соскучишься: "... шаолини....шаолини это не самураи...". Долго я смеялся, но зато в конце этого урока я понял, почему этот курс называется "Путь Самурая". Чтобы стать Самураем, нужно пройти очень трудный путь. Спасибо.

[@ЮрийЗолотов-б1р]

Всем привет! В дополнение к посту ptlatka: в react router 6 не срабатывает параметр по умолчанию в . Для того, чтобы нормально отобразилась страница по умолчанию нужно просто добавить еще один Route: . . .

[@Rakhmankuloff-c7b]

если ты попробуешь сначала зайти на страницу пользователя (любого), а потом на свою через навлинк в навбаре, у тебя ничего не получится

[@volselongames4505]

@@Rakhmankuloff-c7b А как быть тогда, не подскажешь,

[@sophiet1694]

не знала, что такое withRouter, спасибо большое!

[@Nikitosss91]

Когда выучу реакт - открою свою школу " Путь Шаолиня" .

[@victorpidorovic3314]

сморозил конечно знатно, петросян v.2

[@olegzidane7099]

не остри аж так)

[@Ангелина-ю5ц7м]

самое понятное и простое объяснение withRouter

[@АлександрСидоркин-л2з]

У кого 6 версия роутов, в ответе скидываю вам самый рабочий фикс:

[@АлександрСидоркин-л2з]

В ProfileContainer пишем: let {userId} = useParams() if(!userId){ userId = '2'; } В роутах пишем: ...Остальные роуты

[@alexxxcode]

@@АлександрСидоркин-л2з Как ты мог использовать хук в классе? (если ты конечно делал profileContainer классом как димыч)

[@АлександрСидоркин-л2з]

@@alexxxcode Я придерживаюсь современного подхода к разработке и пишу на функциональных компонентах, используя хуки.

[@МаринаСавіна-о7ю]

@@АлександрСидоркин-л2з а гет запрос как обрабатывал?

[@milter2539]

Урок 60. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:

[@kanstantsinav]

Те, кто смотрит это в 2022 году и использует React Router v6 Смотри ниже в коменте. Ютуб - собака немытая блочит коммент

[@kanstantsinav]

export const withRouter = (Component) =>{ let RouterComponent = (props) => { const match = useMatch('/profile/:userId/'); return ; } return RouterComponent; }

[@kanstantsinav]

Просто добавь эту конструкцию в код, в 70 уроке поймешь, что это

[@evgeniimolchanov]

@@kanstantsinav Большое спасибо)

[@Ddddddddyu]

а почему react router убрал withRouter ? Почему нам его нужно самому писать?

[@kanstantsinav]

@@Ddddddddyu потому, что это костыть для совместимости с курсом. По факту сейчас все работает через хуки

[@МихаилКопониров]

withRouter, React, Redux ! Летим дальше!

[@ole_oli]

Спасибо Димыч, вот и познакомился я с withRouter

[@pannihto7588]

Про withRouter не знал, а потому с большим удовольствием посмотрю

[@developers_gaming]

Прочитал перед видосом, читаю какую-то доку или статью по каждой теме перед видосом что бы понимать о чем речь и меньше тормозить)

[@agataageeva424]

withRouter в массы !

[@MrBlackChildren]

пасибо Димыч, разложил по полочкам withRouter ReactJS, withRouter, ContainerComponent, Redux. Современный JS со всеми наворотами и новинками одному навряд ли разгрести. Спасибо Димычу! React Путь самурая - супер курс!!!! Димыч спасибо , круто обьясняешь . Я сижу кушаю яблочко после удаленки и понимаю ,что ты круче наших учетелей раз в 100. React JS - withRouter, props.match.params - все круто, все получается, большое спасибо за выпуск !

[@ЯДИграет]

Лучшие уроки по React & Redux! withRouter

[@vlad-zf1ev]

withRouter, props.match.params, react, redux