19. Уроки React JS (route, browser-router, маршрутизация) - react курсы бесплатно

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT —INCUBATOR:

Front-end

Back-end

Поддержать меня можно на:
или оформив спонсорство на данном канале.

Ууууух, наши уроки по React JS становятся всё интереснее и интереснее!!!

У нас ведь теперь есть 2 конмпоненты главные (Dialogs и Profile), по сути, 2 разные страницы! И нам хотелось бы между ними как-то переключаться!!!

И тут нам на помощь приходит компонента Route

Как она работает? Компонент Route просто следит за адресной строкой браузера и ... Если замечает, что там отображается "свой" (нужный ей) URL, то автоматом отрисовывает нужную компоненту!

А вот то, что в данном уроке я прописывал:

* установка пакета:
npm i react-router-dom -save

* пример (замените знаки ⋗ и ⋖ на нормальные):
Вот в это нужно обернуть компоненту App:
⋖BrowserRouter⋗ ⋖App /⋗⋖/BrowserRouter⋗
А вот так добавлять уже сами роуты:
⋖Route path='/dialogs/' component={Dialogs} /⋗
* Сайты:

* Мы в соц. сетях:

* Мои личные VK и Insta:

#reactJS #практика #примеры #уроки #курс

[igorekupaev]

В новой версии выдает ошибку, правильно теперь вот так:

<Routes>
<Route path="/profile" element={<Profile/>}/>
<Route path="/dialogs" element={<Dialogs/>}/>
</Routes>

Не благодарите:)
// Кстати я устроился на работу, уже прошло 5 рабочих дней. Так что все реально, главное не опускать руки и будет все хорошо:)

[pvm]

Спасибо за уроки !
Синтаксис в ролике работает для версии react-router-dom <6
Для 6 версии синтаксис такой

import {BrowserRouter, Routes, Route} from "react-router-dom";

<BrowserRouter>
<div className='app-booker'>
<Header />
<NavBar />
<div class='app-booker-content'>
<Routes>
<Route path="/dialog" element= {<Dialogs/>}/>
<Route path="/profile" element={<Profile/>}/>
</Routes>
</div>
</div>
</BrowserRouter>

[lduinrm]

Ребят, кто в 2021 смотрит, у кого ошибка с route. Он сейчас по-другому работает. Нужно сделать так:
<Routes>
<Route path="/profile" element = {<Profile />}/>
<Route path="/dialogs" element = {<Dialogs />}/>
</Routes>

[vadimkovtunenko]

Спасибо большое Дмитрий 👏👍
Для 6 версии синтаксис такой

import {BrowserRouter, Routes, Route} from "react-router-dom";

<BrowserRouter>
<div className="app-wrapper">
<Header/>
<Navbar/>
<div
<Routes>
<Route path="/profile" element={<Profile/>}/>
<Route path="/dialogs" element={<Dialogs/>}/>
</Routes>
</div>
</div>
</BrowserRouter>

[ivbxlsl]

Не забывай говорить вших вших вших (как самурайским мечем!) 😀 🐼

[uugpets]

У твоих уроков эффект сериалов. В конце интересно начать новую серию. Спасибо!

[sldstrst]

ну что, впервые на youtube появился человек, которому ставишь сначала лайк, а потом смотришь, а не наоборот

[brainboom]

Блин, меня действительно подкупает такая искренность и отдача. Ставлю перед собой цель -- комментировать и лайкать каждое твое видео, Спасибо еще раз))

[deepindub]

11:47 "...что эта запись даст?"-послышалось совсем другое ахахах

[IAMSHEVCHUK]

Для меня сработал следующий вариант:
import {BrowserRouter, Route, Routes} from "react-router-dom";

const App = () => {
return(
<div className='app-wrapper'>
<Header />
<Navbar />
<div class="app-wrapper-content">
<BrowserRouter>
<Routes>
<Route path="/dialogs" element={<Dialogs />}/>
<Route path="/profile" element={<Profile />}/>
</Routes>
</BrowserRouter>
</div>
</div>
);
}

[dlucky]

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

[ascar]

Все получилось. Теперь App.js выглядит так
const App = () => {
return (
<BrowserRouter>
<div className='app-wrapper'>
<Header/>
<Navbar/>
<div
<Routes>
<Route path="/dialogs" element={<Dialogs/>}/>
<Route path="/profile" element={<Profile/>}/>
<Route path="/news" element={<News/>}/>
<Route path="/music" element={<Music/>}/>
<Route path="/settings" element={<Settings/>}/>
</Routes>
</div>
</div>
</BrowserRouter>
);
}

[firepixel]

Лайк, подписка и что там еще можно. Где ж ты раньше был со своими уроками. Я наконец то начал понимать реакт!!!

[musicfortheears]

Ребят, кто смотрит в 2023, и у кого ошибки с роутингом. В последней версии реакт-роутер-дом изменился синтаксис. Вот рабочий код:

import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => {
return (
<BrowserRouter>
<div className="app-wrapper">
<Header />
<Navbar />
<div
<Routes>
<Route path="/dialogs" Component={Dialogs} />
<Route path="/profile" Component={Profile} />
</Routes>
</div>
</div>
</BrowserRouter>
);
};

[MrMomomoy]

Привет всем из 2021. Сейчас уже вышел 6й реакт роутер дом. Там ряд нововведений. Вместо components надо писать element. Пример . было <Route exact path="/" component={Home} />, стало - <Route path="/" element={<Home />} />. Я блин полтора часа времени убил чтобы понять почему оно не работает. Так же теперь вместо Switch используется Routes

[ljturxf]

2022
Много кто уже писал о особенностях 6 версии.
Меня не устраивало, что Profile не загружался по умолчанию
Ниже пример как это поравить
const App = () => {
return (
<BrowserRouter>
<div className='app-wrapper'>
<Heder />
<Navbar />
<div
<Routes>
<Route path='*' element={<Profile />} />
<Route path='/dialogs' element={<Dialogs />} />
</Routes>

</div>
</div>
</BrowserRouter>
)
};

так же в компонентах можно поменять <a> на <Link>
<Link to='/profile'>
Profile
</Link>
Позволяет не перезагружать страницу при переходе по ссылкам

[rmnkot]

в vs code ctrl+p - поиск файла, ctrl+tab - навигация по открытым файлам

[ihorshylov]

Круто, спасибо большое!
Получается все, делаю сам, оно как-то работает но в голове еще куча вопросов)
Надеюсь к концу проекта вопросов будет намного меньше)

[lerne-du]

Еще раз ОГРОМНОЕ тебе душевное спасибо за то, что все так подробно разжевываешь. Я буквально вчера была на онлайн тренинге по react и слушала о компонентах. Рука-лицо... даже стыдно за тренера стало после того, как видела уже твои пояснения. Я не просто пишу, я ПОНИМАЮ, что я пишу и как оно примерно будет работать. Спасибо! 💕

[vcmonlg]

12.11.2021!
Синтаксис изменился.
Теперь пишется так:
<div
<Routes>
<Route path="/news" element={<News />} />
<Route path="/settings" element={<Settings />} />
<Route path="/music" element={<Music />} />
<Route path="/dialogs" element={<Dialogs />} />
<Route path="/profile" element={<Profile />} />
</Routes>
</div>