Маршрутизация React

1.

Маршрутизация React
React router DOM
Учебная практика ПМ.08
Разработка дизайна веб-приложений
Преподаватель: Л.В. Ильюшенков

2.

Установка react router dom
React router — дает возможность
беспрепятственно просматривать разные
страницы или переходить с одной страницы на
другую без перезагрузки браузера.
Для установки библиотеки наберите в
терминале:
npm install react-router-dom

3.

Создание маршрутов
Отредактируйте файл index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter} from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);

4.

Создание маршрутов
Отредактируйте файл App.js
import {Routes, Route} from "react-router-dom";
import SearchPage from "./components/pages/search_page";
import Auth from "./components/pages/auth";
Маршрут
…...
function App() {
return (<div>
Отображаемая
страница
<Routes>
<Route path={'/'} element={<SearchPage/>}/>
Переменная
часть
маршрута
<Route path={'/register'} element={<Registeration/>}/>
<Route path={'/login'} element={<Auth/>}/>
<Route path={'/concerts/:date1/:date2/:type'} element={<Concertspage/>}/>
<Route path={'/test'} element={<Test/>}/>
<Route path={'/order/:id/:concert_code/:name_concert/:date_concert/:time_start/:time_finish/:duration/:price'}
element={<Order_page/>}/>
<Route path={'/order_management/:code'} element={<Order_management_page/>}/>
<Route path={'/select_seat/:code'} element={<Select_seat_page/>}/>
<Route path={'/profile'} element={<Profile_page/>}/>
</Routes>
</div>
);
}
export default App;

5.

Переход по ссылке без
перезагрузки
Для этих целей используется тег link (работает по аналогии с
тегом а
import {Link} from "react-router-dom";
<Link to={'/'}><img src="{logo}" alt="WhiteTickets"
className="test-0-logo"/></Link>
При щелчке по рисунку logo осуществляется переход на главную
страницу SearchPage

6.

Перенаправление на другое
представление
Для перенаправления используется hook useNavigate()
import {useNavigate} from "react-router-dom";
let history=useNavigate()
history('/profile') // Перенаправление на страницу профиля
Поддерживает методы goForward(), goBack() - идти вперед и назад по истории

7.

Получение параметров
маршрута
Для этих целей используется хук useParams
например для роутера '/order_management/HGYGJHFD'
( Задан на слайде 3)
import {useParams} from "react-router-dom";
let req=useParams()
let code=req.code
console.log(code) // HGYGJHFD — код бронирования

8.

Задание
Определите для приложения маршруты
Настройте ссылки и переходы,
осуществляемые без перезагрузки страницы