Настройка роутинга в веб-приложениях: советы и лучшие практики

npm install react-router-dom

// index.js или App.js
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

// App.js
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import ProductDetails from './pages/ProductDetails';
import NotFound from './pages/NotFound';

function App() {
return (
<div className="app">
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<Products />} />
<Route path="/products/:id" element={<ProductDetails />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
);
}

// components/Navigation.js
import { Link } from 'react-router-dom';

function Navigation() {
return (
<nav>
<ul>
<li><Link to="/">Главная</Link></li>
<li><Link to="/about">О нас</Link></li>
<li><Link to="/products">Продукты</Link></li>
</ul>
</nav>
);
}

// pages/ProductDetails.js
import { useParams } from 'react-router-dom';

function ProductDetails() {
const { id } = useParams();

return (
<div>
<h1>Детали продукта</h1>
<p>ID продукта: {id}</p>
{/* Здесь можно загрузить данные продукта по ID */}
</div>
);
}

npm install vue-router

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import ProductsView from '../views/ProductsView.vue'
import ProductDetailView from '../views/ProductDetailView.vue'
import NotFoundView from '../views/NotFoundView.vue'

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: AboutView
},
{
path: '/products',
name: 'products',
component: ProductsView
},
{
path: '/products/:id',
name: 'product-detail',
component: ProductDetailView,
props: true
},
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: NotFoundView
}
]
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

<!-- components/NavigationBar.vue -->
<template>
<nav>
<ul>
<li><router-link to="/">Главная</router-link></li>
<li><router-link to="/about">О нас</router-link></li>
<li><router-link to="/products">Продукты</router-link></li>
</ul>
</nav>
</template>

<!-- App.vue -->
<template>
<div class="app">
<NavigationBar />
<router-view />
</div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'

export default {
components: {
NavigationBar
}
}
</script>

<!-- views/ProductDetailView.vue -->
<template>
<div>
<h1>Детали продукта</h1>
<p>ID продукта: {{ id }}</p>
<!-- Здесь можно отобразить данные продукта -->
</div>
</template>

<script>
export default {
props: ['id'],
// Или можно получить параметры через $route
// computed: {
// id() {
// return this.$route.params.id
// }
// }
}
</script>

npm install express

// app.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

// Middleware для обработки JSON
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// Запуск сервера
app.listen(PORT, () => {
console.log(`Сервер запущен на порту ${PORT}`);
});

// Маршруты непосредственно в app.js
app.get('/', (req, res) => {
res.send('Добро пожаловать на главную страницу');
});

app.get('/about', (req, res) => {
res.send('О нас');
});

// Маршрут с параметром
app.get('/users/:id', (req, res) => {
const userId = req.params.id;
res.send(`Информация о пользователе с ID: ${userId}`);
});

// routes/users.js
const express = require('express');
const router = express.Router();

// Получение всех пользователей
router.get('/', (req, res) => {
res.json({ message: 'Список всех пользователей' });
});

// Получение конкретного пользователя
router.get('/:id', (req, res) => {
res.json({ message: `Информация о пользователе ${req.params.id}` });
});

// Создание пользователя
router.post('/', (req, res) => {
res.json({ 
message: 'Пользователь создан', 
user: req.body 
});
});

// Обновление пользователя
router.put('/:id', (req, res) => {
res.json({ 
message: `Пользователь ${req.params.id} обновлен`, 
updates: req.body 
});
});

// Удаление пользователя
router.delete('/:id', (req, res) => {
res.json({ message: `Пользователь ${req.params.id} удален` });
});

module.exports = router;

// app.js (продолжение)
const usersRoutes = require('./routes/users');
const productsRoutes = require('./routes/products');

// Монтирование маршрутов с префиксами
app.use('/api/users', usersRoutes);
app.use('/api/products', productsRoutes);

// Обработка 404
app.use((req, res) => {
res.status(404).json({ message: 'Маршрут не найден' });
});

// Обработка ошибок
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).json({ message: 'Что-то пошло не так!' });
});

// middleware/auth.js
function authenticate(req, res, next) {
const token = req.headers.authorization;

if (!token) {
return res.status(401).json({ message: 'Требуется авторизация' });
}

try {
// Здесь обычно идет проверка JWT токена
// const decoded = jwt.verify(token, 'ваш_секретный_ключ');
// req.user = decoded;
next();
} catch (error) {
return res.status(401).json({ message: 'Недействительный токен' });
}
}

module.exports = { authenticate };

// Применение к маршрутам
// routes/protected.js
const express = require('express');
const router = express.Router();
const { authenticate } = require('../middleware/auth');

// Этот маршрут требует аутентификации
router.get('/profile', authenticate, (req, res) => {
res.json({ message: 'Защищенный профиль', user: req.user });
});

module.exports = router;

// Определение маршрута с параметрами
<Route path="/products/:category/:id" element={<ProductDetail />} />

// Получение параметров в компоненте
import { useParams } from 'react-router-dom';

function ProductDetail() {
const { category, id } = useParams();
return <div>Продукт {id} из категории {category}</div>;
}

// Определение маршрута с параметрами
{
path: '/products/:category/:id',
name: 'product-detail',
component: ProductDetail,
props: true
}

// Получение параметров в компоненте
export default {
props: ['category', 'id'],
created() {
console.log(`Загрузка продукта ${this.id} из категории ${this.category}`);
}
}

app.get('/products/:category/:id', (req, res) => {
const { category, id } = req.params;
// Запрос к базе данных или другая логика
res.json({ category, id, productInfo: {...} });
});

// components/ProtectedRoute.js
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children, isAuthenticated }) {
if (!isAuthenticated) {
// Перенаправляем на страницу входа
return <Navigate to="/login" replace />;
}

return children;
}

// Использование в маршрутах
<Routes>
<Route path="/login" element={<Login />} />
<Route
path="/dashboard"
element={
<ProtectedRoute isAuthenticated={user !== null}>
<Dashboard />
</ProtectedRoute>
}
/>
</Routes>

// router/index.js
const router = createRouter({
// ...конфигурация маршрутов
routes: [
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}
]
});

// Глобальный навигационный хук
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') !== null;

if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});

const jwt = require('jsonwebtoken');

// Middleware для проверки JWT токена
function authenticateToken(req, res, next) {
const authHeader = req.headers['authorization'];
const token = authHeader && authHeader.split(' ')[1];

if (!token) return res.sendStatus(401);

jwt.verify(token, process.env.SECRET_KEY, (err, user) => {
if (err) return res.sendStatus(403);
req.user = user;
next();
});
}

// Применение к защищенным маршрутам
app.get('/api/profile', authenticateToken, (req, res) => {
res.json({ user: req.user, data: 'Секретная информация профиля' });
});

<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route index element={<DashboardHome />} />
<Route path="analytics" element={<Analytics />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>

// В компоненте Dashboard необходимо разместить Outlet
import { Outlet } from 'react-router-dom';

function Dashboard() {
return (
<div>
<h1>Панель управления</h1>
<nav>
<Link to="/dashboard">Главная</Link>
<Link to="/dashboard/analytics">Аналитика</Link>
<Link to="/dashboard/settings">Настройки</Link>
</nav>
<Outlet /> {/* Здесь будут отображаться вложенные маршруты */}
</div>
);
}

import { useNavigate } from 'react-router-dom';

function LoginForm() {
const navigate = useNavigate();

const handleSubmit = async (e) => {
e.preventDefault();
// Логика аутентификации
if (loginSuccessful) {
// Перенаправление на панель управления
navigate('/dashboard', { replace: true });
}
};

return (/* форма входа */);
}

export default {
methods: {
async handleSubmit() {
// Логика аутентификации
if (this.loginSuccessful) {
// Перенаправление на панель управления
this.$router.push({ name: 'dashboard' });
}
}
}
}

import { useSearchParams } from 'react-router-dom';

function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const search = searchParams.get('search') || '';
const sort = searchParams.get('sort') || 'asc';

const handleSearchChange = (e) => {
setSearchParams({ search: e.target.value, sort });
};

return (
<div>
<input
type="text"
value={search}
onChange={handleSearchChange}
placeholder="Поиск..."
/>
{/* Отображение отфильтрованного списка */}
</div>
);
}

export default {
computed: {
search() {
return this.$route.query.search || '';
},
sort() {
return this.$route.query.sort || 'asc';
}
},
methods: {
updateSearch(value) {
this.$router.push({
query: { ...this.$route.query, search: value }
});
}
}
}