React Router — это библиотека маршрутизации для React, которая позволяет создавать одностраничные приложения (SPA). Он позволяет пользователям переходить между разными страницами приложения, не перезагружая страницу.

Основные функции React Router

• Маршруты: React Router позволяет определять маршруты для вашего приложения. Маршрут — это URL-адрес, который соответствует определенной части вашего приложения.
• Переходы: React Router позволяет пользователям переходить между маршрутами. Переход — это действие, которое перемещает пользователя с одного маршрута на другой.
• Историческая навигация: React Router сохраняет историю навигации пользователя. Это позволяет пользователям вернуться на предыдущие страницы.

Как работает React Router?

React Router использует компонент Router для управления маршрутизацией в вашем приложении. Компонент Router принимает массив маршрутов в качестве входных данных. Каждый маршрут представляет собой объект, который содержит URL-адрес маршрута и компонент, который будет отображаться на этом маршруте.

Когда пользователь переходит по URL-адресу, React Router сравнивает URL-адрес с URL-адресами маршрутов в компоненте Router. Если URL-адрес совпадает с URL-адресом маршрута, React Router отображает компонент, связанный с маршрутом.

Как использовать React Router?

Чтобы начать использовать React Router, вы должны установить его с помощью npm.

npm install react-router 

Затем вы можете импортировать компонент Router в ваше приложение.

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

Чтобы определить маршрут, вы можете использовать компонент Route.

<BrowserRouter> <Route path="/" component={Home} /> <Route path="/about" component={About} /> </BrowserRouter> 

В этом примере мы определили два маршрута:

• /: Этот маршрут соответствует домашней странице приложения.
• /about: Этот маршрут соответствует странице "О нас" приложения.

Чтобы перейти на маршрут, вы можете использовать метод push() компонента Router.

import React, { useState } from "react"; import { BrowserRouter, Route, Link } from "react-router"; const App = () => { const [route, setRoute] = useState("/"); const handleClick = () => { setRoute("/about"); }; return ( <BrowserRouter> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> <div> <h1>Текущий маршрут: {route}</h1> <Link to="/">Главная</Link> <Link to="/about">О нас</Link> <button onClick={handleClick}>Перейти на страницу "О нас"</button> </div> </BrowserRouter> ); }; const Home = () => { return ( <div> <h1>Главная страница</h1> </div> ); }; const About = () => { return ( <div> <h1>Страница "О нас"</h1> </div> ); }; export default App; 

В этом примере мы использовали метод push() компонента Router для перехода на маршрут /about при нажатии на кнопку.

Дополнительные функции React Router

React Router предлагает множество дополнительных функций, которые могут быть полезны для создания сложных SPA.

• Скрытые маршруты: Скрытые маршруты не отображаются в адресной строке браузера.
• Автоматическая маршрутизация: Автоматическая маршрутизация позволяет пользователям переходить на маршруты, не зная их URL-адресов.
• Параметры маршрутов: Параметры маршрутов позволяют передавать данные в компонент, связанный с маршрутом.
• Интеграция с Redux: React Router можно интегрировать с Redux для управления состоянием маршрутизации.

Ключевые слова

• React Router
• Маршрутизация
• Одностраничные приложения
• Компонент Router
• Компонент Route
• Метод push()
• Скрытые маршруты
• Автоматическая маршрутизация
• Параметры маршрутов
• Интеграция с Redux

Заключение

React Router — это мощная библиотека маршрутизации, которая позволяет создавать сложные SPA. Он предлагает широкий спектр функций, которые могут быть полезны для создания эффективных и удобных приложений

WebОбъясните простыми словами, что такое react-route? Для чего он нужен? Он must have или можно обойтись без него? Webreact-router-native react-router предоставляет базовые функции и компоненты для работы в двух окружениях(Браузере и react-native) Мы будем. Web1- Что такое React Router? React Router значит стандартная маршрутизация (routing) библиотеки в React . Он синхронизирует интерфейс приложения с URL на браузере. WebReact Router — это популярный декларативный способ управления маршрутами в приложениях React. Он уменьшает объем работ, связанных с ручной.

что такое React Router, 19. Уроки React JS (route, browser-router, маршрутизация) – react курсы бесплатно, 31.49 MB, 22:56, 181,549, IT-KAMASUTRA, 2019-01-09T18:00:01.000000Z, 2, 2, , rgb(147,202,224) x -LiLuLpkudhxvM, jpg, , 3, %d1%87%d1%82%d0%be-%d1%82%d0%b0%d0%ba%d0%be%d0%b5-react-router

что такое React Router. WebReact Router DOM — это модуль узла, который предназначен для маршрутизации в веб-приложениях. Он позволяет инженерам создавать маршруты. WebReact Router — это не то же самое, что маршрутизатор, направляющий сетевые данные — к счастью! Однако между сетевым маршрутизатором и React.

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

Front-end
it-incubator.io/front-end/?utm_source=youtube&utm_medium=it-k&utm_campaign=education

Back-end
it-incubator.io/back-end/?utm_source=youtube&utm_medium=it-k&utm_campaign=education

Поддержать меня можно на:
Patreon patreon.com/itkamasutra
Boosty boosty.to/itkamasutra
или оформив спонсорство на данном канале.

Помогайте друг другу вот здесь: t.me/reactjs_samurai
Уроки по React JS: youtube.com/playlist?list=PLcvhF2Wqh7DNVy1OCUpG3i5lyxyBWhGZ8

Ууууух, наши уроки по 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

* Мы в соц. сетях:
vk.com/itkamasutra
instagram.com/itkamasutra
telegram.me/itkamasutra

* Мои личные VK и Insta:
vk.com/d.kuzyuberdin
instagram.com/it.kamasutra.dimych/

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

2

Web1- Что такое React Router? React Router значит стандартная маршрутизация (routing) библиотеки в React . Он синхронизирует интерфейс приложения с URL на браузере. WebReact Router — это популярный декларативный способ управления маршрутами в приложениях React. Он уменьшает объем работ, связанных с ручной.