19. Уроки React JS (route, browser-router, маршрутизация) - react курсы бесплатно
Вставка
- Опубліковано 8 лют 2025
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на:
Patreon / itkamasutra
Boosty boosty.to/itka...
или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
Уроки по React JS: • Курс "React JS - путь ...
Ууууух, наши уроки по React JS становятся всё интереснее и интереснее!!!
У нас ведь теперь есть 2 конмпоненты главные (Dialogs и Profile), по сути, 2 разные страницы! И нам хотелось бы между ними как-то переключаться!!!
И тут нам на помощь приходит компонента Route
Как она работает? Компонент Route просто следит за адресной строкой браузера и ... Если замечает, что там отображается "свой" (нужный ей) URL, то автоматом отрисовывает нужную компоненту!
А вот то, что в данном уроке я прописывал:
установка пакета:
npm i react-router-dom -save
пример (замените знаки ⋗ и ⋖ на нормальные):
Вот в это нужно обернуть компоненту App:
⋖BrowserRouter⋗ ⋖App /⋗⋖/BrowserRouter⋗
А вот так добавлять уже сами роуты:
⋖Route path='/dialogs/' component={Dialogs} /⋗
Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#reactJS #практика #примеры #уроки #курс
В новой версии выдает ошибку, правильно теперь вот так:
Не благодарите:)
// Кстати я устроился на работу, уже прошло 5 рабочих дней. Так что все реально, главное не опускать руки и будет все хорошо:)
Благодарю :D
Огромное спасибо все форумы прошарил в поисках ответа.
Благодарю
Спасибо)
Спасибо :)
Спасибо за уроки !
Синтаксис в ролике работает для версии react-router-dom
Спасибо большое, дружище, выручил)
Спасибо!!!! я сижу и думаю,то ли лыжи не едут, то ли я.... все отрисовалось с новым синтаксисом)
Спасибо огромное, очень помог твой комментарий :)
Спасибо тебе, Павел!!!
Поправочка. Если до этого в Navbar писали /dialogs, то не забудьте path так и прописать
огромное спасибо за этот код!!! он мне очень помог.
Ребят, кто в 2021 смотрит, у кого ошибка с route. Он сейчас по-другому работает. Нужно сделать так:
листала комменты специально ради этого, спасибо!!!
Спасибо большое, очень помогли)
13.05.22 ничего не работает
Спасибо
@@FlyDem где сейчас можно найти инфу?
Спасибо большое Дмитрий 👏👍
Для 6 версии синтаксис такой
import {BrowserRouter, Routes, Route} from "react-router-dom";
Спасибо большое
Спасибо братка
спасибо тебе чувак
Работает с версией "react-router-dom": "^6.28.0"
У твоих уроков эффект сериалов. В конце интересно начать новую серию. Спасибо!
100%
100%
Дуже дякую))) Те що в коментарях всі допомагають, якщо є якась проблема, надзвичайно спрощує навчання!
Блин, меня действительно подкупает такая искренность и отдача. Ставлю перед собой цель -- комментировать и лайкать каждое твое видео, Спасибо еще раз))
Для меня сработал следующий вариант:
import {BrowserRouter, Route, Routes} from "react-router-dom";
const App = () => {
return(
);
}
Ты единственный кто выручил, спасибо огромное)
ругается если не обернуть все в возможно из-за дополнительных тегов.
const App = () => {
return (
);
}
Спасибо огромное, все способы перепробовал, твой коммент очень помог!!)
Спасибо, человече ;)
огромное спасибо ты лучший
@@smakdigital как мама поживает?????
Не забывай говорить вших вших вших (как самурайским мечем!) 😀 🐼
Это, кстати, очень важно!
да мечи очень важны!)
Тебе плохо?
Меня это так бесило вначале, а сейчас без "вших-вших" уже грустно(( Смотрю залпом по несколько уроков, канал как родной стал
Для тех кто смотрит в 2к20 с роутами небольшие изменения:
1) import {BrowserRouter as Router, Route} from 'react-router-dom';
2) всё заключаем в тег Router
3) отдельные пути через Route
Смотрю в 2к22, не хочет работать так
Дополняю частью рабочего кода, версия 6.3.0
Return(
)
@@NickiSchultz_ Почему-то Routes is not defined
@@alexqwerty3673 а import {BrowserRouter, Route, Routes} from 'react-router-dom' добавлен?
Как самурай сказал, за импорт элементов не забывать)
@@NickiSchultz_ да, все добавлено, только Routes подчеркивается волнистой линией, как я понимаю он не находит его в react-router-dom
ну что, впервые на youtube появился человек, которому ставишь сначала лайк, а потом смотришь, а не наоборот
Еще Евгений Таранов и Ярослав Брин
Подтверждаю
Я бы ставил и До и После))
11:47 "...что эта запись даст?"-послышалось совсем другое ахахах
Бывает))
@@ITKAMASUTRA звучит как новая песня Эдуарда Сурового
@@КимКузин-й9ж а мы сидим. Без Дим..
слушаю на скорости 1.25, раза 3 прослушал, только потом осознал что имеется ввиду )
хахах
Щире дякую Дімич -- дуже круто!!!)
Маленький UPDATE:
import { Route, Routes, BrowserRouter } from "react-router-dom";
...
Лайк, подписка и что там еще можно. Где ж ты раньше был со своими уроками. Я наконец то начал понимать реакт!!!
Дима блин. Я просто фанат твоей манеры изложения материала. До этого читая книги по программированию я засыпал практически над ними иногда. А тут все интересно и весело. Если бы мне так в школе на информатике преподавали бы, я уже точно после школы стал бы программистом. Некоторые твои уроки можно на цитаты прям разбирать. Я не знаю где у тебя шило, но твой задор и твоя манера изложения это нечто. Обнял)
Угу, как будто гопник с семками, выучивший слово инкапсуляция
и
import { BrowserRouter, Routes, Route } from 'react-router-dom';
в противном случае белый экран(((
Автору спасибо за изложение материала. Ну поменялся синтаксис -- не беда)
Привет всем из 2021. Сейчас уже вышел 6й реакт роутер дом. Там ряд нововведений. Вместо components надо писать element. Пример . было , стало - . Я блин полтора часа времени убил чтобы понять почему оно не работает. Так же теперь вместо Switch используется Routes
Спасибо огромное, подсказка как раз кстати, теперь все получилось
Спасибо :)
Спасибо. Респект ))
Ты потратил время не впустую самурай, ты спас много времени остальных! Спасибо=))
Привет, у меня не получается, не могу сдвинуться с места, мог бы помочь?
в vs code ctrl+p - поиск файла, ctrl+tab - навигация по открытым файлам
спасибо, попробуем!!!!
Можно колесом мыши сверху прокручивать заголовки открытых файлов -тоже нормальная каруселька получается)
Все интересней и интересней с каждым уроком становится, летим дальше, домашку сделал вшух вшух
2022
Много кто уже писал о особенностях 6 версии.
Меня не устраивало, что Profile не загружался по умолчанию
Ниже пример как это поравить
const App = () => {
return (
)
};
так же в компонентах можно поменять на
Profile
Позволяет не перезагружать страницу при переходе по ссылкам
Спасибо тебе!!!!Прям большое большое!!!))))))
Спасибо большое за ответ!
* - его используют когда указан неправильный путь. Тогда получается что при каждом неправильном пути, будет отображаться Profile. А если ты хочешь чтобы при неправильном пути грузилась твоя кастомная страница 404?
Продолжаю смотреть в 2024 г. Всё супер, ты лучший.
Все получилось. Теперь App.js выглядит так
const App = () => {
return (
);
}
2021 г. май - все получается. Другие три страницы (ссылки) создать получилось. Спасибо Димыч!!!
Ребят, кто смотрит в 2023, и у кого ошибки с роутингом. В последней версии реакт-роутер-дом изменился синтаксис. Вот рабочий код:
import { BrowserRouter, Routes, Route } from "react-router-dom";
const App = () => {
return (
);
};
Друже, ты оочень помог!) спасибо!
спасибо большое!
Спасибо за отличное видео. Но для тех кто смотрит это видео в 2022 году с версией 6 react-route-dom, то нужно написать вот так
import {BrowserRouter, Routes, Route} from 'react-router-dom';
const App = () => {
return (
Главное не забыть добавить BrowserRouter, Routes, Route в import.
Спасибо )👍
Спасибо, смотрел, что вроде без path можно было, но в результате ничего не работало, так что, главная конструкция осталась старой. Добавилось пару незначительных нововведений
Привет, у меня не получается, не могу сдвинуться с места, мог бы помочь?
Есть тг или другая соц сеть, я могу скрин сбросить, если надо, но хочу разобраться что за херня
@@theway_up Там всё намного проще чем кажется. Смотри, для начала, в файле App.js сделай правильный импорт, он будет отличаться чем в видео, так как вышли новые версии данной библиотеки. Правильный импорт будет примерно таким: import {BrowserRouter, Routes, Route} from "react-router-dom";
Далее, в этом же файле, после скобки слова return пропиши тег и закрой его перед последней скобкой с точкой и запятой.
Третий этап: все теги что у тебя есть в данном файле, оберни их в тег , и не забудь его закрыть после последнего .
Вроде это всё, что тебе нужно сделать
Вначале лайк, потом просмотр, а комментарии никому обычно не пишу, а тебе с удовольствием! Спасибо за такой труд, отдачу и искренность.
Бомбим дальше!)
Всем привет с Винницы!
За 20 минут сделала кликабельными Music, News, Settings
Все получилось с первого раза. Только ссылки забыла в какой папке лежат, но потом нашла в Навбаре. Все отлично спасибо за знания!
Блин, я как зависимый - "Еще одну и ТОЧНО спать" и так до утра) Спасибо тебе за твой труд!)
Ложись в 11 вечера, и будешь учиться в 3 раза быстрее!
@@kioko1007 золотые слова. А еще пик мозговой активности с раннего утра и до 12 примерно
Круто!
Завдання виконав, йдемо далі!
Дякую за курс)
актуальные правки на конец 21-го года:
import {BrowserRouter, Routes, Route} from "react-router-dom";
а сами роуты должны быть прописано вот так:
спасибо, долго парилась, ты очень помог! успехов
Может быть Вы знаете, почуму IDE(WS) подчёркивает Routes, в импорте?? И как это исправить?
Спасибо а то уже не знал что делать
Привет, у меня не получается, не могу сдвинуться с места, мог бы помочь?
Благодаря Вашим объяснениям и комментаторам смогла настроить маршрутизацию) Всё получилось, теперь берусь за конспект !
12.11.2021!
Синтаксис изменился.
Теперь пишется так:
в топ!!!! очень помог!!!
спасибо, добрый человек
Привет, у меня не получается, не могу сдвинуться с места, мог бы помочь?
@@theway_up что конкретно ?
Когда-то слышала утверждение, что чем лучше человек знает материал, тем проще может объяснить даже самые сложные моменты. Это про тебя! Точно-точно))
я сам понял что смотрю уроки без подписки где то на 12-14 уроке)) канешн подписался) и перед просмотром лайк)
хоть как то помогу)
уже третий день смотрю, до 19 уже дошла, очень интересно, все понятно, все записываю и повторяю, спасибо за курс!
Круто, спасибо большое!
Получается все, делаю сам, оно как-то работает но в голове еще куча вопросов)
Надеюсь к концу проекта вопросов будет намного меньше)
Подписан с 19 года, колокольчик при мне, лайки завожу, комменты - сори что начал "спасибо" дублировать, спустя 18 уроков, уже фантазия иссякает😅🚀
в app.js
добавляем такой импорт: import {BrowserRouter, Routes, Route} from "react-router-dom";
весь код после return оборачиваем в
далее добавляем
чтоб посмотреть работает ли в браузере в пути в конце после слэша пишем то что написано в path тоесть /profile либо /dialogs.
Золотой ты человек! Что сейчас код надо другой прописывать - многие отписались, а вот как проверить, что работает - искала полчаса))))
Спасибо тебе большое, ты супер! Очень помог твой комментарий!
Спасибо огромнейшее!!! (и ребятам - за измененный синтаксис для react-router-dom версии 6)
Димыч, докладываю:
урок законспектировал, домашку сделал, бомбим дальше!
Спасибо тебе!
Спасибо за полезный курс, такая плавная подача материала ставит все точки над И во время обучения и не оставляет вопросов. Приятно, что в комментариях тоже люди активно помогают, когда синтаксис React изменился.
Дима - космос, все по делу, а главное все работает, показываешь, рассказываешь - как все по документации первоисточника (это редкость сейчас)
--2021--
**
**
Теперь тег оборачивается в тег , а component={Profile} меняем на element={}(в элемент тоже прописываем тег).
Может быть Вы знаете, почуму IDE(WS) подчёркивает Routes, в импорте?? И как это исправить?
@@theWorldIsMultivariate , я работаю через Visual, такого у себя не замечала, прописывала вот так import { Route, Routes } from "react-router-dom";
@@in_the_fox_fur понятно, спасибо.
Кууулл Продовжуєм і знов Дякуємо)) Ти кращий!
Спасибо за урок) Все получилось) Домашнее задание готово) Летим дальше!
Дмитрий, все получилось, три элемента для роутера настроены. спасибо, еду дальше!
Спасибо за курс. Отличный материал даже в 2022 году. Сначала напрягало, что ты излишне разжёвываешь инфу, однако заметил, что какие-то невероятно базовые вещи не осознавал до твоего курса
Все супер, все становится на свои места, очень доходчиво, смотрю дальше
Еще раз ОГРОМНОЕ тебе душевное спасибо за то, что все так подробно разжевываешь. Я буквально вчера была на онлайн тренинге по react и слушала о компонентах. Рука-лицо... даже стыдно за тренера стало после того, как видела уже твои пояснения. Я не просто пишу, я ПОНИМАЮ, что я пишу и как оно примерно будет работать. Спасибо! 💕
Первый видеокурс за который хочется заплатить! 👍👍👍
Мне кажется, это очень хорошо, что ты так неспоешно все разжовываешь и повторяешь. Потому что часто бывает так, что быстро посмотрел тему и думаешь: а, ну все понятно... а через пару дней выясняется, что нихрена непонятно было, или ты уже забыл все что быстро глянул. А когда вот так, обстоятельно подходишь к делу - то реально запоминаешь хоть что-то, хотя бы самое основное!!
Все получилось, ух react завлекает с каждым видео,Крутяк Димыч Спасибо
mersi cavt tanem, mernem janit aziz, qo shnoriv jamanaks karchacreci
спосибо Димыч джан, весь курс прошел, всё было ооооооооооочень круто, сматри 2 раз чтобы укрепить знания
И как дела у тебя братец? Устроился на работу?
@@andreiBylkin да брат, уже 6 месяца как устроился, сначала было очень тяжело, провалил около 10 собеседование, но не стаял на месте учил дальше, все будет хорошо, не сдавайся ;)
@@codegorian6057 долго устраивался, если не секрет?:)
@@andreiBylkin полтора года
спасибо за видос! к уроку добавлю - посмотрите как работать с зависимостями с помощью npm. на том же ютубе есть коротенькие видосы, которые объясняют структуру package.json и как устанавливать зависимости(флаги -save --dev). времени потратите немного, но это будет крайне полезно.
что касается рутера, то на момент выхода видео такой вариант написания устарел,в комментариях дают актуальный вариант(и скорее всего если поменяется допишут), но я бы порекомендовал тем у кого не работает погугглить самим как исправить код урока(а не копипастить),чтобы он работал, это будет хорошая практика на понимание реакта, заодно докуху по рутеру изучите. также стоит начать использовать консоль F12 - таб console. там вы сможете увидеть ошибки
Вдруг кто-то делает наперёд как я. После кода на 16:11 выходит какая-то ошибка с Routa'ми. Не гуглите, дальше всё объясняется))
я тоже топтался на этой ошибке, пока все не досмотрел )
такие комментарии должны быть вверху!!
Ааа)) спасибо, час уже гуглю)
Дякую, ти зекономив мені час)
начинал зимой учить, но не было времени изза работы и остановился на 33 уроке . сейчас заново за день взахлеб уже на 19. Все понятно и интересно .Спасибо !
Бля, давно у меня такого не было, такое чувство, что я в 2006 и смотрю сериал Солдаты, не надоедает и очень интересное, очень давно не ощущал такую заинтересованность ! Димыч THANK YOU !
Спасибо за объяснение! Домашнее сделал) я подписан) Летим дальше!
Всем привет из 2024.
Сейчас рабочий вариант такой:
import { Routes, Route, BrowserRouter } from 'react-router-dom';
Спасиб кста комент написан 5 месяцев назад как там прошел путь самурая офер получил ??
Ставлю лайки потому что видосы годные, и чтоб не потерять на каком уроке остановился
Круто, сейчас уже стало интереснее, начинаю писать код) Спасибо
ага, оно как расскачка идёт - всегда интереснее! ну и темы сейчас будут поживее и поинтереснее))
Ну что там, нормально раскачался?
Ты так поясняешь, что я даже не знаю как можно не понять)) спасибо! Погнали дальше
Внимание всем кто смотрит в МАЕ 2022, react-router-dom - с появлением 6 -ой версии изменился синтаксис: 1. Импорт - import {BrowserRouter, Route, Routes} from 'react-router-dom';
2. В App.js нужно писать только так или работать не будет -
function App() {
return (
);
}
ДО сих пор АКТУАЛЬНО
Я без function написал и работает
От души! Выручил)
Братан, не работает можешь помочь, через соц сеть как то
Просто волшебные объяснения! Безумно нравится ваш курс, всё понятно. *Мотивирует!*
Круто. Заходит как любимый сериал 😁
санта-барбара (старпёры поймут) отдыхает) Димыч планирует снять серий 150)))
@@ITKAMASUTRA Проблема любимых сериалов в том, что ты не хочешь чтобы они заканчивались..(
@@ITKAMASUTRA Хоспади) С ужасом поняла, что помню даже имена персонажей Санта_Барбары))
Но Евгений прав) Я тож как увлекательный сериал смотрю) Основы знаю, но видео не проматываю и не пропускаю) Столько мелочей Дмитрий рассказывает, боюсь пропустить что то))
19 уроков прошли как песня! Погнал выполнять маленькую простую домашку) Спасибо, всё круто.
У кого после 17-49 вылезет такая ошибка :
Attempted import error: 'react-router-dom' does not contain a default export (imported as 'Route').
Исправляется тем, что импорт в App.js нужно прописать ВРУЧНУЮ
import {BrowserRouter, Route} from "react-router-dom";
- именно такой, как на видео,
а не тот, что прописывает WebStorm !
спасибо , я уже думал не найду ошибку !!!!
Я теж так робив
Благодарен даже в 2021году
У меня требует Routes вместо Route. А потом не видит ни Dialogs, ни Profile.
@@denyskosyriev2256 такая же фигня
vse poluchilos, Uroki super! spasibo ogromnoe!!!!!!!
Прем вперед!!! Димыч Красавчик!!!
Все легко и все понятно !) Спасибо !)
Окрема подяка коментуючим, ви найкращі! Значно пришвидшуєте пошук інфи) Летимо далі🏃🏃🏃
В общем, ребят. По состоянию на 2023:
1) npm uninstall react-router-dom
2) npm i react-router-dom@5 -save
const App = () => {
return (
);
}
Спасибо
Мне помогло, спасибо
благодарю всех, кто подсказа изменения в синтаксисе, спасибо) И Димыч спасибо тоже за ролик
Ты крутой, продолжай в том же духе!!!)
Все круто! задание выполнил. Летим дальше!
полный рабочий код файла App.js на 13.03.2022:
import React from 'react';
import './App.css';
import Header from './components/Header/Header';
import Navbar from './components/Navbar/Navbar';
import Profile from './components/Profile/Profile';
import Dialogs from './components/Dialogs/Dialogs';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
const App = () => {
return (
);
}
export default App;
сначала посмотрел просто так, понял всё, пересмотрел и записал в тетрадь всё село в голове. Спасибо Димыч)
обратите внимание на синтаксис, долго мучался и искал ответы.
Спасибо
Привет, у меня не получается, не могу сдвинуться с места, мог бы помочь?
Крутяк , чувствую что постепенно становлюсь самураем. Спасибо Димыч !!!!!
Привет из 22! Димыч красава!
У кого не работает из-за конфлита версий попробуйте-так:
index.js: (в начало)
import { BrowserRouter as Router } from 'react-router-dom';
------
root.render(
);
App.js
import { Routes, Route } from "react-router-dom";
Ну а в целом попробуйте по гуглить и найти решение сами, так будет лучше для вас в перспективе
ЭТОТ комментарий для тех, у кого не работает программа из-за ошибки 'Route' is not defined. Я долго думал и нашёл в чём проблема. Просто вы плохо установили react-router-dom на этом моменте 12:50. Посмотрите в какую папку вы устанавливаете этот модуль. Вся моя проблема была в том, что я устанавливал этот модуль не в ту папку и я просто перешёл на уровень выше в файловой системе и всё успешно установилось, а после и заработало. Короче может я и плохо или не правильно объяснил, может для когото эта ошибка звучит глупо, но я просто хочу помочь такому же человеку, как и я. Это один из выходов в этой проблеме, который помог мне, вам он может и не помочь.
проще говоря, положите в папку своего проекта, у меня это папка my-app
Все гуд бегу далее)) А тема с картой проекта реально все упрощает!
Сейчас вроде --save писать не надо, npm автоматически добавляет в package файл
Спасибо
Капец, это очень круто, я такую же штуку делал в js,а тут две компоненты и ты Бог)
то чувство, когда реакт на ts сейчас легче идёт, чем когда-то js
никогда еще образование не было таким приятным! Респект!
кто смотрит в 2023 route чуточку поменялся:
import { BrowserRouter as Main, Route, Routes } from 'react-router-dom'
const App = () => {
return (
);
}
Белый экран, видно только хидер и навбар без бэграунда
Очень информативный урок! Дотошно как для детей, как и всегда, за это спасибо. Так же как и у других, возникла проблема в синтаксе, но все решилось. Дз выполнил, проблем не возникло.
Как обычно тупые комменты, типа "вжих-вжих-вжих" рулят. Но это и показывает уровень современных разработчиков. Я же лично был поражен тем, насколько лаконично реализован переход по ссылкам)). Разработчикам Reacta браво. Спасибо за работу. Надеюсь устроиться на работу разработчиком.
у кого не работает попробуйте так:
import { BrowserRouter, Routes, Route } from "react-router-dom";
не работает
Четко сработало , я два часа сидел голову ломал че за фигня, лучший ))
Проверил подписку. подписан:) реакт без боли и страданий:) Очень классно все объясняешь
Тем, кто смотрит в 2023, вот рабочий код:
import { BrowserRouter, Routes, Route } from 'react-router-dom'
Спасибо🤝
працює цей код, робив 18.04.23
import {BrowserRouter, Route, Routes} from "react-router-dom";
const App = () => {
return (
);
}
Большое спасибо!
Огромное спасибо за объяснения!!! В каждом уроке открываю фишки которые не знал не только по React но и по другим сопутствующим технологиям!!!
Ребятки, если хотите что бы было как на видео,
напишите в терминале
npm i react-router-dom@5.3.0
после чего в App.js напишите код как на видео
import {BrowserRouter, Route} from "react-router-dom";
import (компонентов)
function App(props) {
return (
)
}
це робочий варіант дякую
Отличный экспресс курс на данный момент) смотрю пяток видео, затем пишу код)
2021 году версия: "react-router-dom": "6.0.1",
import { BrowserRouter, Routes, Route } from "react-router-dom"; вместо Switch импортируем Routes
тоже за этим тут, спасибо)
Благодарю
Спасибо :)
Просто спасибо за курс и за то, что запустил цепочку позитива и взаимовыручки!
В комментах такие классные советы.
Спасибо каждому, кто не поленился отписаться после удачного решения