Курс React и Redux. 10. Базовый роутинг с react-router. Стилизация приложения

[@mavldr]

ИСПРАВЛЕНИЕ ОШИБКИ:
В новой версии react-router ( v6+ ), требуется элементы обернуть в 

И вместо атрибута component={PeoplePage}, использовать запись element={}

Атрибут "exact" - теперь используется по умолчанию и его указывать не нужно.
/// Код выглядит вот так






[@SamSturdy]

можешь код App.jsx скинуть, а то я все сделал но все равно не работает и ошибки

[@mavldr]

@@SamSturdy куда скинуть?

[@NAZAR_BUK]

Красава, ти зберіг мені купу часу і нервів!

[@kb-Films]

Всех приветствую!
Если кому то пригодится, то вот исправления:
Файл App.jsx
import { Routes, Route, Link } from "react-router-dom";
const App = () => {
return (

Home
People





);
};
И в файле index.js добавляем импорт:
import { BrowserRouter } from "react-router-dom";
и тэг обворачиваем в :
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(





);
А так же, если у кого проблема с активными ссылками, у меня при активной /people, так же была активной 'Home', нужно просто дописать: end
Home

[@mavldr]

ИСПРАВЛЕНИЕ ОШИБКИ 2: 21:30
Когда мы создаем конфигурацию с роутами ( routeConfig ), в переборе надо указать вызов компонента
element={ route.element() }

[@eduardsyava]

доброе время суток. а зачем вконце "()" ?
element={ route.element() }

[@talantasanov4973]

@@eduardsyava это вызов компонента как и он сказал

[@ИгорьНово]

Все как обычно мего по делу, полет нормальный идем дальше! Спасибо Антон!!

[@alijonbazorbaev9967]

Большое спасибо

[@TheArestus]

Как всегда отлично! Спасибо!

[@NAZAR_BUK]

В react-router-dom v6, "Switch" замінили на "Routes". Просто пропишіть імпорт правильно, як показано нижче та замініть слово на
import { BrowserRouter, Routes, NavLink, Route } from 'react-router-dom';

[@benchik100]

26:53 по БЭМ названия БЛОК__ЭЛЕМЕНТ, т.е. тут className={styles.container__list} а не наоборот. Автор спасибо за контент!

[@LetsCodeDev]

да, точно!

[@maximshevchenko6202]

Эффект свечения впечатляет, все эти игры с тенями это нечто. Хотел бы курс по такой магии, видел у Вас курс по Html and CSS возможно там есть, а если нет то был бы рад узнать ваши секреты:)

[@LetsCodeDev]

Есть идея записывать еще видео по HTML и CSS, но люди требуют программирования =) Я после этого курса таки думаю немного по вёрстке сделать. По теням есть куча разных генераторов. Я у себя в справочнике собрал несколько. Там есть и другие интересные ссылки
dev-pandaren.github.io/training/themes/links/instruments/generators

[@maximshevchenko6202]

@@LetsCodeDev спасибо, сам больше люблю код чем верстку, но понимаю что без нее фронтенд не фронтенд

[@progra2mer-developer]

можно использовать такуие конструкции
className={({ isActive }) =>
`${s.link} ${isActive ? s.active : ""}`
}
className={(props) => `${s.link} ${props.isActive ? s.active : ""}`}
для теста можете посмотреть в консоле что возвращает функция (будет ошибка и объект)
className={(props) =>
console.log(props)

`${s.link} ${props.isActive ? s.active : ""}`
}

[@LetsCodeDev]

я бы это вынес в отдельную функцию типа getClassName() и потом бы ее указал className={getClassName()}. это чтобы не перегружать JSX логикой

[@АлексейМерзляков-м9ц]

ИСПРАВЛЕНИЕ ОШИБКИ
"react-router-dom": "^6.6.1"
С роутерами в корне src папки в файле index.js
//код ( импорт BrowserRouter не забудьте)



//код в файле App.jsx (импорт Routes и Route не забываем)

[@LetsCodeDev]

А какую ошибку это исправляет?

[@АлексейМерзляков-м9ц]

@@LetsCodeDev ту которую в комментах написал Денис Мавлютов, а ВЫ закрепили это сообщение, там не правильно слово написано, плюс добавить надо BrowserRouter, у Вас в коде на Гите она исправлена, но здесь в комментах нет подробностей.

[@LetsCodeDev]

@@АлексейМерзляков-м9ц Хорошо, спасибо!

[@МаксимНырков-у6г]

Спасибо, я думал что var() используется только в scss

[@LetsCodeDev]

var() уже давно в CSS. Самые смелые используют, если не нужно поддержка IE

[@МаксимНырков-у6г]

@@LetsCodeDev госпадя, чувствую себя динозавром. Сколько помню, использовал scss для переменных, а миксины же еще надеюсь не используют в обычном css?

[@LetsCodeDev]

@@МаксимНырков-у6г Скоро будут))) Есть draft tabatkins.github.io/specs/css-apply-rule/
CSS берет лучшее из препроцессоров

[@МаксимНырков-у6г]

@@LetsCodeDev прикольно

[@MrExcaliburYO]

@@LetsCodeDev Эта спека Abandoned

[@pahaivanov1611]

Похоже что react-routing как то поменялся и возникла сложность с дальнейшем прохождение курса, на этом видео я посыпался)))

[@ilnurgabitov3264]

npm uninstall react-router react-router-dom - удалите текущую 6-ю версию и вот установите данную версию, как у автора:
npm i react-router-dom@5.2.0
npm i react-router@5.2.0
Надеюсь, что ваша версия Node JS 14.15.4
Проверить можно командой: node -v
Если нет, то это будет причиной ещё многих, будущих ошибок

[@NAZAR_BUK]

Ти читай коментарі під відео, тут багато чого описано як переробити те що у відео(стара версія) на нову. Давай працюй, реакт сам себе не вивчить) , я теж зробив паузу на 1м.......

[@kirillhrynko6565]

Спасибо!