React-Навигация в веб-приложениях

1.

Проектирование и разработка веб-приложений. Лекция 7.
React-Навигация
Navigate. Route. Ссылки. Обновление.
Москва, 2025

2.

Повестка дня
Адреса страниц…………..3
Маршруты страниц………4
Навигация (Route)…………5
Создание перехода………7
Задание…………………….8
Пример……………………..9

3.

Адреса страниц
export const LOGIN_ROUTE = '/auth';
export const REGISTRATION_CLIENT_ROUTE =
'/reg_client';
export const REGISTRATION_ROUTE = '/reg';
export const CLIENT_ROUTE = '/client';
export const EMPLOYEE_ROUTE = '/employee';
У каждой страницы должен быть свой адрес.
3

4.

Маршруты страниц
export const authRoutes = [
{
path: ADMIN_ROUTE,
Component: <Admin/>
},
{
path: ANALYST_ROUTE,
Component: <Analyst/>
},
{
path: EXECUTIVE_ROUTE
+ '/:id',
Component: <Executive/>
},
{
path: CLIENT_ROUTE +
'/:id',
Component: <Client/>
}
]
export const publicRoutes = [
{
path: LOGIN_ROUTE,
Component: <Auth/>
},
{
path:
REGISTRATION_ROUTE,
Component: <Registration/>
},
{
path: SERVICE_ROUTE,
Component: <Service />
},
{
path: MAIN_ROUTE,
Component: <Main />
}
]
Маршруты подразделяются на требующие авторизации и не требующие.
4

5.

Навигация сайта
Route, Routes, Navigate - импортируются из
библиотеки 'react-router-dom'
authRoutes, publicRoutes публичные и приватные маршруты
const AppRouter = observer(() => {
const {user} = useContext(Context);
console.log(user.isAuth);
return (
<Routes>
{user.isAuth && authRoutes.map(({path, Component}) =>
<Route key={path} path={path} element={Component}
exact/>
)}
{publicRoutes.map(({path, Component}) =>
<Route key={path} path={path} element={Component}
exact/>
)}
<Route path="/" element={<Navigate replace
to={LOGIN_ROUTE}/>}/>
</Routes>
);
});
Встраивание в главный компонент
5
user.isAuth - отметка, что
пользователь авторизован
replace to={…} - адрес страницы
useContext(Context) - хранилище
(класс-объект) на клиенте,
созданное в файле index.js
return (
<div className="App">
<BrowserRouter>
<NavBar />
<AppRouter />
</BrowserRouter>
</div>
);

6.

Как это работает
Router — это компонент верхнего уровня с
отслеживанием состояния, который заставляет
работать все остальные компоненты навигации и
хуки.
Для веб-приложений обычно используется
BrowserRouter.
<Routes> проверяет все свои дочерние
элементы <Route>, чтобы найти наилучшее
соответствие, и отображает эту часть
пользовательского интерфейса.
Когда указанный путь path соответствует
текущему URL-адресу, то отображается
компонент, указанный в качестве элемента
element.
6
path="*" используется для
назначения странице
дефолтного маршрута.
Сюда будет совершаться
пересылка со всех
необъявленных путей.

7.

Применение
<Navigate to="/home" />
const navigate = useNavigate();
navigate('one', { replace: false })}>
import { useNavigate } from "react-router-dom";
import { PROFILE_ROUTE, LOGIN_ROUTE } from "../utils/consts";
<Link to="/one">Page One</Link>
…
Импорт нужных файлов
const history = useNavigate(); //navigate("/books", { replace: true,
state: { bookName: "Fake Title" }})
Link, Outlet, useLocation
Создание объекта навигации
Вызов перехода страницы в
соответствии с логикой сайта
…
const logout = () => {
user.setIsAuth(false);
user.setUser({});
history(LOGIN_ROUTE);
<Button variant="info" onClick={() =>
history(PROFILE_ROUTE + '/' +
selectedClient.client_id)}>
Просмотреть профиль
</Button>
Передача параметров
7

8.

Параметры
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
} from 'react-router-dom';
Импорт
function BlogPost() {
const { slug } = useParams();
return <div>Отображается пост
{slug}</div>;
}
useParams (из react-router-dom)
возвращает объект с
параметрами URL в формате
ключ: значение
Передача параметров
8
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/blog/:slug">
<BlogPost />
</Route>
</Switch>
</Router>,
node
);

9.

Context — это механизм в React для управления состоянием и передачи данных через дерево
компонентов без необходимости передавать props на каждом уровне (пропс дриллинг).
export const SliderContext = createContext();
createContext - объявление контекста
(зона, в которой будут передаваться
данные). Созданный контекст
необходимо экспортировать.
<SliderContext.Provider // Поставщик данных
value={{
// Данные для передачи
goToSlide,
Context.Provider
компонент,
changeSlide,
оборачивающий наши компоненты,
slidesCount: items.length,
которые должны иметь доступ к
slideNumber: slide,
данным.
items,
}}
useContext - хук, позволяющий
получить данные (value) из context.
> /* Дети получат доступ к value */
<Arrows />
<SlidesList />
<Dots />
import
{
SliderContext
}
from
"./Slider";
</SliderContext.Provider>
Context
const Arrows = () => {
// useContext достает данные из Context
const { changeSlide } = useContext(SliderContext)
9

10.

Особенности Context
const Dot = ({ number }) => {
// Получаем и данные, и функции
const { goToSlide, slideNumber } = useContext(SliderContext);
// Когда кликаем на точку:
// 1. Вызываем goToSlide(number)
// 2. В Slider.jsx вызывается setSlide(number)
// 3. Контекст ОБНОВЛЯЕТСЯ
// 4. ВСЕ потребители (Dot, SlidesList) получают новые
данные
// 5. Компоненты перерисовываются
10
Все, что использует контекст,
перерендеривается каждый раз, когда
контекст изменяет состояние.
Только компоненты, которые
вызывают useContext, повторно
ререндерятся при изменении стейта
контекста.

11.

Задание 1
Создать многостраничное приложение для парикмахерской: страница
регистрации/авторизации, страница для оформления записи, страница для просмотра
всех
записей
1. Создать
context для хранения данных пользователей,
1. Создать context для хранения данных сотрудников, их
их записей и предоставляемых салоном услуг.
записей и клиентов, зарегистрированных в салоне.
2. На странице регистрации и авторизации должна быть
форма, которая добавляет данные в context пользователя
или сверяет с ним данные. После удачного входа
пользователя должно перекидывать на страницу с его
записями.
2. На странице регистрации и авторизации должна быть
форма, которая добавляет данные в context сотрудник
или проверяет права. После удачного входа сотрудника
должно перекидывать на страницу с его записями.
3. На странице оформления записи сотрудник может
заполнить форму, где он может записать клиента на одну
из своих услуг (чекбоксы) и выбрать время записи.
Клиенты должны отображаться в выпадающем списке
(select), будучи импортированными из хранилища
клиентов салона. Система должна автоматически
добавить эту запись в context для нужного мастера.
3. На странице оформления записи пользователю должна
быть предоставлена форма, где он может выбрать услугу
(должна быть указана цена, продолжительность и фио
мастера в виде меню в модальном окне или выпадающем
списке) и выбрать время записи. Система должна
автоматически добавить эту запись в context для нужного
пользователя.
4. После оформления заявки, пользователя необходимо
перебросить на страницу заявок. На этой странице в виде
карточек должны отображаться все записи мастера.
Здесь также должна быть кнопка для создания новой
записи.
4. После оформления заявки, пользователя необходимо
перебросить на страницу заявок. На этой странице в виде
карточек должны отображаться все заявки пользователя.
Здесь их можно отменить (запись удаляется из хранилища),
а также должна быть кнопка для создания новой заявки.
1 вариант
11
2 вариант

12.

Задание 2
Создать метод обновления таблицы согласно варианту:
1. Создать кнопку-иконку для обновления определённой строки таблицы (карточки в
листе), данные которой были получены методом GET. У каждого элемента листа должна
быть такая индивидуальная кнопка в нижнем правом углу.
2. Создать отдельную страницу с формой для обновления данных, на которую будет
перебрасывать пользователя при нажатии кнопки.
3. При первом отображении в форме должны отображаться предыдущие данные. То есть
при переходе на эту страницу передаются текущие актуальные значения сущности.
4. Написать метод, который будет отправлять данные с формы на сервер и обновлять
таблицу. Данные нужно обновлять выборочно (не все разом), идентификатор обновляться
не должен.
5. После обновления пользователя необходимо перебрасывать обратно на страницу с
данными, переданными из GET-запроса (отображаются обновлённые данные).
12

13.

Пример формы обновления
import React from 'react';
import { Button, StyleSheet, TextInput, View } from 'react-native';
import { Formik } from 'formik';
export default function Form({addCase}) {
return (
<View>
<Formik initialValues={{ text: '', number: '' }} onSubmit={(values, action) => { // начальные параметры
addCase(values);
action.resetForm()
}}>
{(props) => (
<View>
<TextInput value={props.values.text} // переменная, которая подставляется по умолчанию из
параметров
placeholder='Впишите заметку...' // подсказка для ввода
onChangeText={props.handleChange('text')} // запись нового значения в параметры
multiline // атрибут для ввода нескольких строк в поле ввода
/>
<TextInput value={props.values.number}
placeholder='Укажите номер дела...'
onChangeText={props.handleChange('number')}
/>
<Button title='Применить изменения' onPress={props.handleSubmit} />
</View>
)}
</Formik>
</View>
);
}
13

14.

На этом всё…