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