Новий React Router Dom - Українською. Частина перша.
Вставка
- Опубліковано 8 гру 2022
- 👉 Відео присвячене навігації в ReactJs за допомогою react-router-dom версії 6.4.4.
Розглянуто новий підхід до створення роутів, завантаження даних, створення майстер сторінки для роутів.
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
💡Всі матеріали курсу: github.com/Drag13/react-learn...
Write an app that will allow user to find the lesson about React
The app should contain a field where user can enter some text and the button search
When user hits search button:
1. Query parameter should be added to the current string
2. Search should be executed
3. After successful search cards with short information about the lessons should apper
On card click:
1. user should be navigated to the route like '/lesson/{LESSON_NAME}'
2. lesson with given name should be loaded and displayed
All errors should be handled
Advanced
Try to use onChange handler instead of btnSearch first. Observe the network. Than switch to the search btn approach
Code snippet
fetch('react-course-api.azurewebsites.net/lesson/SEARCH_KEYWORD').then(x=>x.json
Як приємно, коли з'являється професійний контент українською, дуже дякую вам за це ❤
Дякую!
Дякую за державну ❤
А які ще є варіанти?)) "Какая разница" має піти в небуття!
Зараз дойшов до половини відео, і вже радий, що попав на тебе, шановний Автор, вже стало на місця що таке Oullet, LayOut, index: true. Дякую за повільну і покрокову роздуплятину.
Приходьте ще)
Комент для просування каналу! Дякую за професійний контент українською!
Дякую і за комент, і, головне, за концепцію!
Дякую величезне! Я заглянула в доки, а там це оновлення, то не знала що до чого. це прекрасне пояснення! дякую!!!
Дякую автору за український контент. Як раз зараз почав вчити React і українські туторіали гріють серце)
дякую, за контент українською!
Дякую!
Дякую за корисну інформацію
Дуже дякую за якісний контент💥
Дякую! Як раз шукала інфу на цю тему
Дякую за українську, дякую за вашу роботу 💛💙 Чекаємо на нові відео.
Дякую, будуть!
Ще би трохи про actions, було би супер)
а як додати exact перед " path" ?
Update there is no need "exact" I have already test it
Дякую за хороший контент
Дякую, за контент українською.
ЧАСОВі мітки це те що потрібно!!!!
О, круто, новинки!))
Какая новинка, мы еще летом это проходили, там домашка была с интернационализацией. Из новинки только появился хук useRoutes который съедает конфиг, вот и все!
Привіт! Підписався на тебе! Дякую за Українську, велике прохання ти на початку відео говорив і звук був норм, а потім ти наче відійшов десь на 1 метр і звук став інакший.
Дякую, могло бути нажаль. Далі має бути краще
дякую, дуже якісний контент 👍👍 було б гарно якщо б були таймінги
Будуть, але скоріше за все вже в нових
Доброго вечора! я щось пропустила, і тепер не можу зрозуміти : це визначено десь в документації, що файли сторінок мають називатися something.page.jsx , чи це Ваш підхід найменування файлів (я за приставку .page) ?
Виключно мій, для того щоб одразу бачити що це початок сторінки. Ви можете називати файли так, як зручно та звично вам та команді.
Дякую за корисний контент! Можете сказати чому сторінка може бути пустою у React Ruoter?
Багато причин може бути. Перше що спадає на думку - помилка в URL
було б круто розбити відео на відрізки за темами, простіше шукати потрібну інформацію
Доброго дня, чи є цей код на github, я щось не знайшов, там тільки стара версія.
Випадково не це шукаєте - github.com/Drag13/new-react-router-example
@@reactdev тааак це воно, дякую))
@@vladimirdmitrienko8158 прошу
Дякую за Українську
Таке питання, як це змусити працювати з asyncThunk redux-toolkit? Так розумію воно перехоплює усі запити і будь який реквест від Thunk іде у ліс. Взагалі якась дерев'яна річ у плані сумісності. Не хочу повертати нічого з Лоадеру, я хочу щоб він просто викликав Thunk, бажано передав туди параметри, і воно мені запише щось у мій глобальний стейт. Ну в крайньому разі, чи можна з фетч з Лоадеру записати щось у глобальний стейт. Як це взагалі робиться з RTK? Жесть якась. Понапридумують якісь костлявих оновлень і нових версій які без напильника не працюють одна з одною.
Ладно, знайшов свою помилку, env з сервером лежав у src... store.dispatch(...Thunk(URL+params)) працює у Лоадері
@@nix7705 як ти зробив, щоб asyncThunk запрацював у loader? можеш написати виклик asyncThunk у loader повністю?
@@nix7705 дякую, розібрався
Хлопцы можете что то подсказать по поводу того, если смысл не писать урлы строками, а держать их в константах?Судя по практике внедрения описанных в других топиках могут возникнуть сложности, с тем, что в Link урлы указываются абсолютные, а во вложенных Route - относительные. Получается для этого нужно написать свой генератор роутов? Просматривается страаная вещь , что данного функционала нет в роутерах, которую разработчики реакта вложили в новых версиях?
Loader це хрень. Як кешированє проходить і як контролюавани як наприклад в react-query? Як retry робити? Я бы не рекомендував би використовувати action, loader and etc. Для простінького пет проєкту підійде але щось серйозне НІ.
І хотілось би бачити більше коментарій поділу а не похвалу лише за українську мовую
Дякую за труд але лише як туториал використанняю
Лоадер - це просто функція яка викликається при завантаженні роуту. Що там буде і як воно буде реалізовано - на ваш розсуд. Кешування та ретрай, доречі зробити як раз не надто велика проблема, а от інвалідацію, от це може бути складніше.
Ну і мабуть не варто порівнювати базовий функціонал і спеціалізовану лібу, я бе не сказав що це коректно.
Коментарям по ділу завжди радий.
Боже, я подвивися це відео заради останньої його хвилини, як виявляється! Годину шукав інформацію, чому мій лоадер-спінер на лейауті не працює, а виявляється що фолбек на роутер-провайдері треба прокидувати
Дякую! Розробляючи свою апку стикнувся з усіма кейсами і нюансами, що були представлені в цьому відео! Лоадер замість useState це топчик
Приходьте ще)