Я с Димычем в своем познании фронтенда уже настолько преисполнился что я как будто уже сто триллионов миллиардов лет пишу код на триллионах и триллионах таких же реактивных фреймворков как этот React, мне этот JavaScript уже абсолютно понятен и я здесь ищу только одного - чистого кода, умиротворения и вот этой гармонии от статической типизации тайпскрипта, от созерцания великого фрактального подобия и от вот этого замечательного всеединства стейта.= ))))))
Вот я прохожу сей курс в 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); Вдруг пригодится) Хотя конечно хотелось бы тейк парамс засунуть в конвеер компОса, но хз пока как, мы же там пропсы кидаем.
Декабрь 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 уроке, я думаю, это уже не должно составлять большого труда. Всех с наступающим Новым Годом!)
На дворе 2к24, так что лови огромную благодарность из будущего =) Просто снимаю шляпу! Надеюсь на все твои вопросы всегда найдется такой же прекрасный ответ на СтакОверфлоу...
У кого проблемы в 2022г с withRouter - он в современном мире не используется. Что бы он работал нужно в консоли удалить ДОМ - npm uninstall react-router-dom , А затем установить ДОМ старой версии npm i react-router-dom@5.2.0 . Ели ранее делали роуты в APP.s каким то новым (например обертка Роутерс) способом - придется переделать на старый способ (урок Димыча)
Не знал что такое 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.
пасибо Димыч, разложил по полочкам withRouter ReactJS, withRouter, ContainerComponent, Redux. Современный JS со всеми наворотами и новинками одному навряд ли разгрести. Спасибо Димычу! React Путь самурая - супер курс!!!! Димыч спасибо , круто обьясняешь . Я сижу кушаю яблочко после удаленки и понимаю ,что ты круче наших учетелей раз в 100. React JS - withRouter, props.match.params - все круто, все получается, большое спасибо за выпуск !
кстати было бы класно увидеть список терминов которых надо знать определения к примеру React, Redux , SPA, UI, BLL, render, JSX, компонента, callback, ну и так далее))) наверно список около соттни будит
@@ИванБезруков-л3у если ты попробуешь сначала зайти на страницу пользователя (любого), а потом на свою через навлинк в навбаре, у тебя ничего не получится
Привет! Ничего не знаю о withRouter(-ах), но совсем скоро узнаю))). А вообще, хочу выразить благодарность Диме за этот курс и за подход! Судя по манере общения, Дима очень хороший человек! Очень классно, что при этом ещё трудолюбивый и талантливый. Успехов тебе в твойм деле. Оно и пользу приносит, и уникальное в своём роде. Ну и конечно же желаю, чтобы вернулось тебе вдвойне ха твои старания в денежном эквиваленте )))
Смотрю Димыч твои видео по несколько раз, первый раз для ознакомления, второй раз когда пишу код, что бы время от времени подсматривать, если что то не получается смотрю третий раз
Самое лучшее видео на курсе. Ради этого и проходил этот курс. Боже, это так прикольно. хочу пересматривать этот видос раз 100 и повторять withRouter. уиии
Всем привет! В дополнение к посту ptlatka: в react router 6 не срабатывает параметр по умолчанию в . Для того, чтобы нормально отобразилась страница по умолчанию нужно просто добавить еще один Route: . . .
Можно переделать в конце ролика проверку userId на более локаничную. Вместо let userId = this.props.match.params.userId; if (!userId) { userId = 2; } написать const userId = this.props.match.params.userId || 2; А ещё есть баг - если перейти на чей-то профайл, а потом в навбаре клацнуть профайл, чтобы посмотреть свой профайл, то перерисовка не произойдёт и ничего не поменяется=(
#withRouter #reactjs #react #js Ууууу, чуть голова не лопнула от огромного количества повторений компонента в компоненте которая в компоненте , и та тоже в компоненте , и компонента в еще одной компоненте. Звучит это все как то так: «На море на океане есть остров, на том острове дуб стоит, под дубом сундук зарыт, в сундуке - заяц, в зайце - утка, в утке - яйцо, в яйце - игла, - познаешь React»
Огромный респект за этот курс, даже имея опыт в реакте, много чего нового подчерпываю, особенно какие-то архитектурные вещи, которых я не нашел даже на многих платных курсах.
Третий раз уже не засыпал на просмотре))) Понимаю, что после 100 видео надо будет пересматривать плейлист заново. Переосмыслить, закрепить. Хороший урок, хочется научиться уже показывать свой профиль по умолчанию, но похоже надо сперва научиться авторизовывать юзера, а это тянет за собой кучу моментов.
React. Redux. wihRouter. React-Redux. Пушка курс, очень приятная и простая подача, спасибо тебе за основы Димас, но уже начинаются проблемы с разницей в поколениях!) Уже нет того WithRouter и вообще роуты по другому делаются, все чаще приходится догугливать все, огромное спасибо тебе за основы реакта, но дальше наверно нужно уже смотреть курс актуальной версии реакта, буду пересматривать твой курс еще много раз!
Интересный момент: withRouter делает одноименные пропсы из mapStateToProps недоступными. Наример если в const mapStateToProps = state =>({match: 'something'}) в ProfileContainer (который был обёрнут withRouterом) значение для пропса match будет объект со свойтвами path, url etc полученный благодаря withRouter. Нужно быть на чеку и не давать названия match, location, history пропсам внешней обёртки.
@@olegzidane7099 Привіт! З таким поясненням - доволі легко. Нічого зайвого, починаючи з основ, все структуровано і зрозуміло. Мені є з чим порівняти: ходила на курси, де викладач не вмів і мабудь не хотів викладати. Те, що для нього просто - для мене на той час було взагалі чужим і не відомим. Не було пояснення елементарного: компонентів, стейту, пропсів - одразу в галоп: робіть магазин. Шукала інформацію і вчилася з таким стресом і істериками, що бажання вивчати реакт відпало. На щастя в мене був вибір: Реакт чи Ангуляр. Обрала для себе напрям Ангуляру, де викладач був не новачок і починав дійсно з основ. А тепер от вирішила таки добити почате :)
@@olegzidane7099 це були безкоштовні курси. У нас в місті спільнота айтішників активно веде освітню програму за декількома напрямами. Безкоштовно, але відсів порядку 50%. Якщо не відвідуєш лекцій, не встигаєш за програмою чи не хочеш вчитися - відраховують. І я б не назвала їх негативним досвідом, навпаки - хлопці працюють на совість. Просто не зайшло саме вивчення Реакту. Але там був вибір, по якому фреймворку продовжувати навчання, тож обрала той, який був зрозуміліший на вступних лекціях
Димон ты наверно психолог еще ) Знаешь как работает мозг или точнее, какие ошибки он будет совершать, уже не первое видео замечаю, где ты повторяешь пройденное и приходишь к новому так, где в предыдущих уроках у меня, да и многих думаю, возникли вопросы и ошибки. И теперь я понял, почему ты говоришь "если вам трудно, не стойте, идите дальше, дальше будет понятнее" и вы будите смотреть как будто из высока. Я прям преисполняюсь, как ниже уже, кто-то начал преисполняться, что как будто уже 100 триллионов миллиардов лет проживаю на триллионах и триллионах таких же планет :)) withRouter, props.match.params, react, redux, проект с нуля. Димыч - красавчик!)
Теперь догадался, откуда берутся юзеры и почему их так много)) Я сразу думал, что их создают ученики, которые бекенд изучают. Также теперь понятно, какая часть будет платной)
