Миша, спасибо большое, невероятно полюбил твои видео! В скором времени ещё и курсы твои куплю по TS, ты очень классно и просто объясняешь даже комплексные темы)
Согласен с комментаторами. Крайне благодарен за контент и старания сделать максимально быстро максимально новое, обязательно буду теперь следить за вашими обновлениями)
Ты представит не можешь насколько твой канал 🏖 среди будущего 🌊 программирования)). Сейчас как раз делаю пет-проект, хочу на стажёра куда-то попасть. Все технологии которые хотел добавить- Router, Redux-toolkit, MaterialUI и другие... Обо всем есть видео от тебя. Самому с документацией сложнее было-бы разбираться в разы. И качество такое, что грех не понять :) Спасибо огромное!!!
Спасибо большое! Обычно подача материала на разных каналах или дикция меня очень раздражает и проще было самому методом тыка и чтения документации разбираться. Теперь, дополнительно прослушивая ваши разборы различных тем стало куда проще разбираться и уверенней себя чувствовать.
Разобрался. className={({isActive})=>isActive ? s.activeLink : ' '} - где "s" это имя объекта который использует модульность css в React. Его вы можете указывать любое. Указывается оно при импорте import s from "./MenuHead.module.css"; вместе с путем к css файлу.
@@AI_about_crypto спасибо огромное, бро! Тоже прохожу курс по реакту, тоже уперся в эту проблему... у меня получилось .item .activeLink. Надо бы в группу в телег по хорошему пост с визуализацией сделать, там очень часто это спрашивают.
Не подскажите, а при использовании вложенных ссылок, скажем /blog/cats... ссылка у blog останется активной или будет активна последняя вложенная ссылка?
Не знаю может я что-то делаю не так, но если использовать компонент layout в роутах обернув все роуты в один, и используя NavLink, ломается определение active класс, так как всегда / будет активна даже если переходишь на другой роут, то в итоге два активных класса получается
Добавьте в NavLink параметр end, это частично аналог exact из прошлой версии, говорит о том, что урл закончился и иных совпадений не ищи, в противном случае у вас все URL имеют в себе /, потому он всё считает за Home. Как-то так :)
00:31:00 как ты выделяешь все теги, чтоб их заменить? Круто было бы отображать нажатие клавиш (hotkey), есть такие проги. Очень полезная история) Спасибо!
Спасибо вам за топовый контент. Есть вопрос, если я работаю с препроцессором sass и ещё у меня все в модулях, если я буду использовать просто Link, мой класс не будет считываться, потому что по умолчанию в class падает просто active. Получается я по умолчанию должен использовать тернарный оператор и задавать нужный класс?
Да, при использовании модулей, для указания активного css-класса в className передается функция и для ключа isActive по тернарнику назначается желаемый класс или пустая строка.
Подскажите пожалуйста, в чем может быть проблема. _rafce не работает в vsCode, то есть не разворачивается автоматически функциональный компонент, emmet даже не предлагает. На этом видео видно, что все ок (когда, к примеру, создается SinglePage.jsx). Что такое расширение ES7+ React snippets знаю, не то. Как работает нижнее подчеркивание, что оно означает в данном контексте, тоже интересно. p.s. Гугл не помог, как только не искал =(
У вас два алиаса на одну страницу? Или вам просто надо чтобы активность отображалась как с гет-параметрами, так и без оных? Как разруливаются гет-параметры - в заключительном видео цикла рассмотрено.
Михаил, здравствуйте. А как сделать ссылку такую, чтобы не на одну страницу все подгружалось, а чтобы при клике по ссылке я переходил на другую страницу
Признаться не совсем понимаю сути вопроса. Если функционал SPA не нужен и надо перейти на страницу сайта за пределами клиентского роутинга, то используйте обычный тег ссылки
@@mishanep вы пишите _rafce и у вас разворачивается функция. ну или const и компонент готовый. когда я пишу в висуалстудия _rafce у меня ничего не выдаёт.
@@artyrdanilov2791 тогда это не хоткей. Эта штука называется сниппетом. У меня есть отдельный ролик на эту тему. Можно создавать свои собственные, можно установить расширения с готовыми наборами сниппетов. В этом ролике сниппет из расширения (react, redux что-то там snippet). Сегодня я кастомные использую.
Михаил, спасибо за контент! Я в приложении использую Ant Disign. В компоненте Sider, который предлагает биб-ка есть поля Menu.Item для навигации, которые при клике становятся активными (добавляются некоторые классы). В эти Menu.Item я вставил для переключения страниц. Но у меня внутри страниц тоже есть ссылки, которые ведут на те же роуты. Как сделать так, чтобы при клике на ссылку внутри страниц, менялась отображение активности у полей Menu.Item в Sider?
У вашего компонента с меню есть проп selectedKeys. Если вы будете управлять им самостоятельно, то сможете добиться желаемого поведения. По умолчанию Ant предлагает меню как неконтролируемый компонент, но предоставляет инструмент для управления им.
Михаил, подскажите, могу ли я повесить свой обработчик кликак на Link. Это работает, но ни является ли это плохой практикой. Я хочу делать scrollToTop на активном линке: const scrollToTop = () => match && scrollTo(0,0)
По мне - это две разные истории. Link предназначен для навигации между страницами, а подскролл - это больше про якорное меню. Для якорного меню не нужен роутинг.
В JS есть разные варианты экспортов developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/export Разница будет в последующем потреблении, то бишь в том как оно будет импортироваться. При дефолтном экспорте в момент импорта вы можете обозвать импортируемый компонент как угодно и JavaScript не обидится. Другой вариант - именованный, и при импорте идет что-то вроде деструктуризации объекта по имени ключа.
Зачем нужен кастомный компонент, если он реализует 99% функционала NavLink? Почему не использовать NavLink? Спрашиваю без пассивной агрессии, правда интересно.
Михаил продолжайте. Вы единственный кто затрагивает новые темы сразу же после их реализа.
Вот если в нашем мире, все бы отвечали именно так. То пропало слова: "я не понимаю".
Спасибо)
Михаил спаисбо за курс по новому React-router)))
Миша, спасибо большое, невероятно полюбил твои видео! В скором времени ещё и курсы твои куплю по TS, ты очень классно и просто объясняешь даже комплексные темы)
Крайне редко оставляю комментарии, но тут не удержался. Отличный контент и подача, продолжайте Михаил!
Что-то слишком часто годный контент выходит )
Михаил, спасибо большое! Очень нравится твоя подача материала 😃
Коротко и по делу. Как раз то, что искала. Спасибо, Михаил.
Согласен с комментаторами. Крайне благодарен за контент и старания сделать максимально быстро максимально новое, обязательно буду теперь следить за вашими обновлениями)
Все четко разложено. Спасибо Брат!!!
Отличный цикл видео по 6 реакт роутеру! Автору большое спасибо за контент на канале!
Михаил, большое спасибо, очень толковый контент!
Замечательное видео!!! Хотелось бы ещ такое же, только с TS )))
Спасибо за ваши очень полезные и актуальные видео ! ! !
Смотрю с удовольствием! Спасибо!
Спасибо огромно! Очень помогаешь в освоении материала!
Ты представит не можешь насколько твой канал 🏖 среди будущего 🌊 программирования)). Сейчас как раз делаю пет-проект, хочу на стажёра куда-то попасть. Все технологии которые хотел добавить- Router, Redux-toolkit, MaterialUI и другие... Обо всем есть видео от тебя. Самому с документацией сложнее было-бы разбираться в разы. И качество такое, что грех не понять :) Спасибо огромное!!!
Попал? На стажера?
@@АлександрСуслов-с8п да
@@teosurch какой город?
@@astkh4381 Та от як бачиш з моєї російської - Львів
@@teosurch честно говоря я тебя не понял
Спасибо большое! Обычно подача материала на разных каналах или дикция меня очень раздражает и проще было самому методом тыка и чтения документации разбираться. Теперь, дополнительно прослушивая ваши разборы различных тем стало куда проще разбираться и уверенней себя чувствовать.
Отличный материал. Благодарю.
Отличная подача материала. Михаил, спасибо за урок.
Мне очень помогло, спасибо вам большое!
Спасибо! Всё очень понятно и просто!
Как всегда лучшее объяснение 👍
Круто!! очень понравилось. Спасибо
Боже, благослави тех, кто выкладывает код на гитхаб
Офигенно объясняете 😯 спасибо большое
Спасибо. То что нужно 👍
Круто, спасибо!
очень доступно, спасибо
Супер!
Спасибо большое!
Быстро и понятно
спасибо !
Как по мне, то с active в пятой версии лучше, есть activeClassName activeStyle. Возможно это просто первое впечатление от 6 версии
Спасибо!
Разобрался. className={({isActive})=>isActive ? s.activeLink : ' '} - где "s" это имя объекта который использует модульность css в React. Его вы можете указывать любое. Указывается оно при импорте import s from "./MenuHead.module.css"; вместе с путем к css файлу.
а в модуле цсс какой путь к этому классу пишешь?
@@TheTurbobarbitura .activeLink {}
@@AI_about_crypto спасибо огромное, бро! Тоже прохожу курс по реакту, тоже уперся в эту проблему... у меня получилось .item .activeLink. Надо бы в группу в телег по хорошему пост с визуализацией сделать, там очень часто это спрашивают.
Здравствуйте, не получается сделать так чтобы ссылка когда активна меняла свой цвет, у меня она постоянна, т/е как активна всегда
@@maksimus.ssirotkin1124 а проверку делаете на наличие активного класснейма?
Не понимаю почему после смены тега на у меня пустая страница?
Не подскажите, а при использовании вложенных ссылок, скажем /blog/cats... ссылка у blog останется активной или будет активна последняя вложенная ссылка?
Почему может не работать способ с className?
Спасибо огромное, очень помогли. У меня пока проблема с модулями, оч мало инфы, как корректно прописывать
Не знаю может я что-то делаю не так, но если использовать компонент layout в роутах обернув все роуты в один, и используя NavLink, ломается определение active класс, так как всегда / будет активна даже если переходишь на другой роут, то в итоге два активных класса получается
Добавьте в NavLink параметр end, это частично аналог exact из прошлой версии, говорит о том, что урл закончился и иных совпадений не ищи, в противном случае у вас все URL имеют в себе /, потому он всё считает за Home. Как-то так :)
@@serj-i2qБро, спасибо тебе! Я почти час потратил в попытках догадаться что не так)
00:31:00 как ты выделяешь все теги, чтоб их заменить? Круто было бы отображать нажатие клавиш (hotkey), есть такие проги. Очень полезная история) Спасибо!
Ctrl+D
@@mishanep спасибо)
👍
почему то корневая ссылка имеет постоянный цвет при переключении, когда NavLink подключил на остальных цвет меняется а Home нет
Добавь в пропсы NavLink - end
@@konstant1n-t8j ага в доках нашёл
woow Im expressed
TNX ,very simple
лойс
0:31 какая комбинация для выделения?
Спасибо за плейлист! А можно узнать как вы так разворачиваете компоненты? Это свой сниппет какой-то?
Я уже деталей конкретного видео не помню. Иногда пользовался готовыми сниппетами через расширения, иногда самописными. Сегодня всё чаще самописными.
Всем привет, как он в VS коде удаляет и вставляет сразу в несколько мест-строк? Подскажите плиз
In new versions haven`t "useMatch", so you can use isActive ( isActive ? ' ' : ' '>... ) instead of & "useMatch" in your custom-links.
Подписка!Лайк. Объясните только пожалуйста, как добавить activeClassName если используешь модули css.
Великолепное видео, сделайте пожалуйста туториал по React Redux, был бы крайне признателен
У меня на канале есть 3 ролика про Redux Toolkit.
михаил у вас есть платные консультации ? если да, то как с вами связаться
У Вас тоже последнее время create-react-app создаёт приложение, которое запускается с какой-то ошибкой в postcss?
Нет, не натыкался
@@mishanep
Вот же засада...
Михаил, подскажите пожалуйста, как выглядит CustomLink на typescript?
import type { LinkProps } from "react-router-dom";
const CustomLink: React.FC = (props) => {}
Спасибо вам за топовый контент. Есть вопрос, если я работаю с препроцессором sass и ещё у меня все в модулях, если я буду использовать просто Link, мой класс не будет считываться, потому что по умолчанию в class падает просто active. Получается я по умолчанию должен использовать тернарный оператор и задавать нужный класс?
Да, при использовании модулей, для указания активного css-класса в className передается функция и для ключа isActive по тернарнику назначается желаемый класс или пустая строка.
Подскажите пожалуйста, в чем может быть проблема. _rafce не работает в vsCode, то есть не разворачивается автоматически функциональный компонент, emmet даже не предлагает. На этом видео видно, что все ок (когда, к примеру, создается SinglePage.jsx). Что такое расширение ES7+ React snippets знаю, не то. Как работает нижнее подчеркивание, что оно означает в данном контексте, тоже интересно. p.s. Гугл не помог, как только не искал =(
Компонент NavLink и его кастомизация в React-Router 6
Подскажите, как сделать чтоб navLink to="/people/page" был активен и по пути /people/person?
У вас два алиаса на одну страницу? Или вам просто надо чтобы активность отображалась как с гет-параметрами, так и без оных? Как разруливаются гет-параметры - в заключительном видео цикла рассмотрено.
Михаил, здравствуйте. А как сделать ссылку такую, чтобы не на одну страницу все подгружалось, а чтобы при клике по ссылке я переходил на другую страницу
Признаться не совсем понимаю сути вопроса. Если функционал SPA не нужен и надо перейти на страницу сайта за пределами клиентского роутинга, то используйте обычный тег ссылки
@@mishanep я так и делал в начале, но почему то , при верном пути этот тег не срабатывал
а что за горячие клавиши для того что бы развернуть const CustomLink ?
Не понимаю о чем речь.
@@mishanep вы пишите _rafce и у вас разворачивается функция. ну или const и компонент готовый. когда я пишу в висуалстудия _rafce у меня ничего не выдаёт.
@@artyrdanilov2791 тогда это не хоткей. Эта штука называется сниппетом. У меня есть отдельный ролик на эту тему. Можно создавать свои собственные, можно установить расширения с готовыми наборами сниппетов. В этом ролике сниппет из расширения (react, redux что-то там snippet). Сегодня я кастомные использую.
@@mishanep можно ссылку на видео?
Михаил, спасибо за контент! Я в приложении использую Ant Disign. В компоненте Sider, который предлагает биб-ка есть поля Menu.Item для навигации, которые при клике становятся активными (добавляются некоторые классы). В эти Menu.Item я вставил для переключения страниц. Но у меня внутри страниц тоже есть ссылки, которые ведут на те же роуты. Как сделать так, чтобы при клике на ссылку внутри страниц, менялась отображение активности у полей Menu.Item в Sider?
У вашего компонента с меню есть проп selectedKeys. Если вы будете управлять им самостоятельно, то сможете добиться желаемого поведения. По умолчанию Ant предлагает меню как неконтролируемый компонент, но предоставляет инструмент для управления им.
@@mishanep у вас в коментарях настоящий stackoverflow :)
Михаил, расскажите про нововведения в navigate и отображения,так скажем, детальных страниц. Спасибо)
Само собой, и до этого доберёмся :)
Михаил, подскажите, могу ли я повесить свой обработчик кликак на Link. Это работает, но ни является ли это плохой практикой. Я хочу делать scrollToTop на активном линке:
const scrollToTop = () => match && scrollTo(0,0)
По мне - это две разные истории. Link предназначен для навигации между страницами, а подскролл - это больше про якорное меню. Для якорного меню не нужен роутинг.
почему вы меняете
export default ComponentName
на
export {ComponentName}
?
в чем разница?
В JS есть разные варианты экспортов
developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/export
Разница будет в последующем потреблении, то бишь в том как оно будет импортироваться. При дефолтном экспорте в момент импорта вы можете обозвать импортируемый компонент как угодно и JavaScript не обидится. Другой вариант - именованный, и при импорте идет что-то вроде деструктуризации объекта по имени ключа.
@@mishanep спасибо за развернутый ответ
Не пойму чем отличаются компоненты NavLink от Link
неочень понял зачем делать кастом линк почему просто не воспользоваться NavLink ом?
нЕ РАБОтаетть такой подход с setActive, незнаю что делать код верный 100%
Зачем нужен кастомный компонент, если он реализует 99% функционала NavLink? Почему не использовать NavLink? Спрашиваю без пассивной агрессии, правда интересно.
консольку так и не показал :(
+
Спасибо!!!