Пагинация в React-приложении с Material-UI

[@art_st2671]

Если у кого-то не отрисовывается ничего после добавления новых страниц и Роутинга (это из-за react-router-dom v6), замените: ===> component={HomePage} ===> element={} Для роутинга на нужно добавить path="*" Upd: В v6 props сами не придут, поэтому достать их нужно вот так: History: import {createBrowserHistory} from "history"; const { current: history } = useRef(createBrowserHistory({ window })) Location: const location = useLocation(); Топ контент, спасибо большое, ваши уроки помогают в реальной работе=)

[@darth_revan3287]

Огромное спасибо

[@osad4enko]

a почему не useNavigate ?

[@Nikitosss91]

Вот это тема. Обалденно, спасибо. Я бы хотел попросить на этом канале выкладывать как можно больше таких вот типовых задах для фронта, пагинацию, модалки, чекбоксы всякие, прогресс бары. Собрать здесь такой альманах готовых решений типовых задач. Спасибо)

[@n1azar]

Спасибо. Весь контент у тебя бомбовый. С первой зарплаты буду донатить. )

[@IhorVyshniakov]

Спасибо вам большое!!! Удивляет как вы с лёгкостью рассказываете про довольно сложные вещи. Ведь чтобы до конца понимать что вы делаете нужно иметь хорошую базу по js и react. Сам основную суть понял, но детали чтобы понять нужно ещё доки библиотек почитать. То что вы на реальном примере и коде все обьясняете это очень доходчиво🤘🙏

[@San-sd3bz]

Ты очень понятно объясняешь, большое уважение! Так может только чел, который разбирается в том, о чем говорит))

[@ДмитрийКозливцев]

Круто! Полезно и своевременно! По больше typescript, пожалуйста

[@vladimirpetikov579]

Вопрос снят. Ещё раз спасибо за уроки!

[@НиколайСеливанов-и2в]

В учебном проекте на пагинацию ушел 1 час, благодаря этому видео. Мне подача информации зашла. Все четко и доступно. Спасибо!

[@АлександрДми]

Хороший урок. Михаил возьми за правило выпускать туториалы всегда с TypeScriptom.

[@OnlyLuck1000]

+1 TS сейчас очень нужен, особенно джунам

[@SergiyAntonyuk_PhD]

Очень полезный урок: лично для меня - как повторение и закрепление уже пройденного ранее. Мне очень нравиться манера изложения автора: предельно четкая, ясная и с очень понятными объяснениями, что ВЫДЕЛЯЕТ автора среди других видео блогеров.

[@Дмитрийсекрет-н7о]

Круто. Спасибо.

[@seoonlyRU]

спасибо))) чоткий мануал. лайк от самого известного сеошника и вебмастера СЕООНЛИ

[@demiurgen13]

Спасибо за видео, было познавательно

[@from_brest2631]

Просто и понятно

[@michaelveselov589]

Предложу свой вариант для решения проблемы location и history в версии 6 роутера: import useLocation - const location=useLocation() parseInt(location.search?.split('=')[1] || 1) и import useNavigate const navigate = useNavigate() navigate('/?page=1', { replace: true })

[@silverlr3130]

Как сделать так, чтобы в ссылке было не 'url/?page=10', а 'url?page=10'. Это сильно бросается в глаза, все таки это квери параметр, а не продолжение ссылки?

[@stephencurry8078]

Приветствую! Очень полезное видео. Будут ролики про React Native? В Ютубе совсем нету, вчера помучился с настройки окружения для разработки

[@mishanep]

React native пока не планирую. Не работал с ним.

[@druf5962]

раскидал код с урока на компоненты, обернул в мемо. переход по страницам - 3 рендера. это же много для пагинации?

[@volselongames4505]

Здарова, а как поменять цвет цифр и кружков в пагинаторе на белый, просто у меня фон сайта тёмный и плохо видно, у него есть свойство color но оно только background выделенной цифры меняет

[@idenis28]

Для приложения без Material UI это актуально? Ещё не смотрел видео, в понедельник планирую сделать. Нужно добавить пагинацию на страничку

[@mishanep]

MUI предлагает UI компонент пагинации, он не какой-то запредельный, можно самостоятельно написать что-то подобное или попроще. Поэтому и без mui будет актуально.

[@idenis28]

@@mishanep Хорошо, спасибо, просто учусь по Вашим видео и курсам на степике, думал есть урок пагинации на чистом реакте

[@mars_family]

Михаил скажите а в работе приходится ли самому писать пагинацию, модальные окна итд(имеется ввиду без материал юай и других библиотек)? С какими из них вы бы посоветовали настоятельно ознакомиться ?🙏 В коментах видел что вы предпочитаете Chakra Ui ( а вобще выбор библиотек чем обоснован? Личным приоритетом или на работе говорят что нужно использовать ?) Понимаю что это глупые вопросы но задать то их больше и некому 🙏🙏

[@mishanep]

Раз на раз не приходится. Иногда самому всё приходится писать, иногда берутся готовые библиотеки - открытые или внутренние корпоративные. Решение обычно принимают архитекторы, лиды, синьоры. При хорошем знании одной ui библиотеки обычно не так сложно перестроиться на другую.

[@mityadima]

Что такое эти стек , контейнер и ТД.... Где тут библиотечные компоненты , а где наши?

[@Александр-и9й6ъ]

наши те, что из нашей папки) остальные из муи)

[@moses4327]

No 'Access-Control-Allow-Origin' header is present on the requested resource что делать?

[@mishanep]

Без контекста не понять в чем суть вопроса.

[@moses4327]

​@@mishanepя изначально не понял в чем проблема, все вроде из видео переписал точь в точь, однако при первом же гет запросе мне такая вот ошибка вылезла, прошерстил весь интернет, особо выхода не нашел, запустил просто чисто axios, проверил работает ли ваще запросы, о чудо все работает, однако в реакт проекте уже нет. Все оказалось проще, после pages в ссылке забыл добавить знак =

[@Умарбек-Махмадиев]

Если честно это точно ваше фамилия?

[@ArcherDe-w6t]

Миша, вспомни уже

[@ГригорийШустиков]

Изначально поставил дизлайк. Т.к. не нашел в этом видео то, что искал. (как осуществить пагинацию, в локальном массиве постов) Но, внимательно пересмотрев видео, на 11й минуте нашел решение по настройке самой пагинации. (настройка компонента pagination библиотека materual UI, функция onChange) далее написал функцию и привязал её к пагинации. После этого, изменил свой дизлайк на лайк.

[@kitsunaana9783]

Ты что? Совсем тупой? Не нашел то, что искал и начал ставить дизы...

[@mikeempire]

@@kitsunaana9783 у тупых такая логика!

[@АрчибальтГугенов]

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