Объяснение React Router на примере простого блога

npm install react-router-dom

 import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); 

 src/ components/ Navigation.js PostList.js PostDetail.js CreatePost.js App.js 

 import React from 'react'; import { Link } from 'react-router-dom'; function Navigation() { return ( <nav> <ul> <li><Link to="/">Главная</Link></li> <li><Link to="/create">Создать пост</Link></li> </ul> </nav> ); } export default Navigation; 

 import React from 'react'; import { Link } from 'react-router-dom'; function PostList({ posts }) { return ( <div> <h1>Список постов</h1> <ul> {posts.map(post => ( <li key={post.id}> <Link to={`/post/${post.id}`}>{post.title}</Link> </li> ))} </ul> </div> ); } export default PostList; 

 import React from 'react'; import { useParams } from 'react-router-dom'; function PostDetail({ posts }) { const { id } = useParams(); const post = posts.find(p => p.id === parseInt(id)); if (!post) return <div>Пост не найден</div>; return ( <div> <h1>{post.title}</h1> <p>{post.content}</p> </div> ); } export default PostDetail; 

 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; function CreatePost({ addPost }) { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); addPost({ title, content }); navigate('/'); }; return ( <form onSubmit={handleSubmit}> <h1>Создать новый пост</h1> <input type="text" placeholder="Заголовок" value={title} onChange={(e) => setTitle(e.target.value)} /> <textarea placeholder="Содержание" value={content} onChange={(e) => setContent(e.target.value)} /> <button type="submit">Создать пост</button> </form> ); } export default CreatePost; 

 import React, { useState } from 'react'; import { Routes, Route } from 'react-router-dom'; import Navigation from './components/Navigation'; import PostList from './components/PostList'; import PostDetail from './components/PostDetail'; import CreatePost from './components/CreatePost'; function App() { const [posts, setPosts] = useState([]); const addPost = (newPost) => { setPosts([...posts, { ...newPost, id: posts.length + 1 }]); }; return ( <div> <Navigation /> <Routes> <Route path="/" element={<PostList posts={posts} />} /> <Route path="/post/:id" element={<PostDetail posts={posts} />} /> <Route path="/create" element={<CreatePost addPost={addPost} />} /> </Routes> </div> ); } export default App; 

<Route path="/post/:id" element={<PostDetail posts={posts} />} />

 import { useParams } from 'react-router-dom'; function PostDetail({ posts }) { const { id } = useParams(); // ... } 

 import { useNavigate } from 'react-router-dom'; function CreatePost({ addPost }) { const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); addPost({ title, content }); navigate('/'); }; // ... } 

 function App() { return ( <Routes> <Route path="/" element={<Layout />> <Route index element={<PostList />} /> <Route path="post/:id" element={<PostDetail />} /> <Route path="create" element={<CreatePost />} /> </Route> </Routes> ); } function Layout() { return ( <div> <Navigation /> <Outlet /> </div> ); } 

 function App() { return ( <Routes> <Route path="/" element={<PostList />} /> <Route path="/post/:id" element={<PostDetail />} /> <Route path="/create" element={<CreatePost />} /> <Route path="*" element={<NotFound />} /> </Routes> ); } function NotFound() { return <h1>404 - Страница не найдена</h1>; } 

 import React, { Suspense, lazy } from 'react'; import { Routes, Route } from 'react-router-dom'; const PostList = lazy(() => import('./components/PostList')); const PostDetail

const PostDetail = lazy(() => import('./components/PostDetail'));
const CreatePost = lazy(() => import('./components/CreatePost'));

function App() {
return (
Загрузка...

Этот подход позволяет загружать компоненты только тогда, когда они действительно нужны, что может значительно улучшить время загрузки начальной страницы.

Использование хуков React Router

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

useLocation

Хук useLocation возвращает объект location, представляющий текущий URL. Это может быть полезно для отслеживания изменений URL или для доступа к параметрам запроса:

 import { useLocation } from 'react-router-dom'; function SearchResults() { const location = useLocation(); const searchParams = new URLSearchParams(location.search); const query = searchParams.get('q'); return 
Результаты поиска для: {query}
; } 

useNavigate

Хук useNavigate, который мы уже использовали ранее, предоставляет функцию для программной навигации:

 import { useNavigate } from 'react-router-dom'; function LoginForm() { const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); // Логика авторизации navigate('/dashboard'); }; return 
{/* Поля формы */}
; } 

useParams

Хук useParams, который мы также уже использовали, позволяет получить доступ к параметрам текущего маршрута:

 import { useParams } from 'react-router-dom'; function PostDetail() { const { id } = useParams(); return 
Пост с ID: {id}
; } 

Защищенные маршруты

В реальном приложении часто требуется ограничить доступ к определенным маршрутам только для авторизованных пользователей. React Router не предоставляет встроенного механизма для этого, но его легко реализовать самостоятельно:

 import { Navigate } from 'react-router-dom'; function ProtectedRoute({ children }) { const isAuthenticated = checkAuthStatus(); // Функция проверки статуса аутентификации return isAuthenticated ? children : ; } function App() { return (  } />    } />  ); } 

В этом примере компонент ProtectedRoute проверяет, аутентифицирован ли пользователь, и либо отображает защищенный компонент, либо перенаправляет пользователя на страницу входа.

Обработка параметров запроса

Параметры запроса часто используются для передачи дополнительной информации через URL. React Router позволяет легко работать с ними с помощью хука useSearchParams:

 import { useSearchParams } from 'react-router-dom'; function BlogList() { const [searchParams, setSearchParams] = useSearchParams(); const page = parseInt(searchParams.get('page') || '1', 10); return ( 
 
Список постов (страница {page})
 {/* Список постов */}  setSearchParams({ page: page + 1 })}> Следующая страница  
 ); } 

В этом примере мы используем параметр запроса ‘page’ для реализации пагинации списка постов.

Обработка истории браузера

React Router автоматически интегрируется с историей браузера, позволяя пользователям использовать кнопки «Назад» и «Вперед» для навигации по вашему приложению. Однако иногда может потребоваться программный доступ к истории. Для этого можно использовать хук useNavigate:

 import { useNavigate } from 'react-router-dom'; function GoBackButton() { const navigate = useNavigate(); return  navigate(-1)}>Назад; } 

В этом примере кнопка «Назад» возвращает пользователя на предыдущую страницу в истории браузера.

Анимация переходов между маршрутами

Для улучшения пользовательского опыта можно добавить анимацию при переходе между маршрутами. Хотя React Router не предоставляет встроенных анимаций, его можно легко интегрировать с библиотеками анимаций, такими как react-transition-group:

 import { TransitionGroup, CSSTransition } from 'react-transition-group'; import { Routes, Route, useLocation } from 'react-router-dom'; function App() { const location = useLocation(); return (    } /> } /> } />    ); } 

В этом примере мы используем CSSTransition для добавления плавного перехода между страницами. Не забудьте добавить соответствующие CSS-стили для анимации.

Оптимизация SEO

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

Для простого блога без серверного рендеринга можно использовать библиотеку react-helmet для управления метаданными страницы:

 import { Helmet } from 'react-helmet'; function PostDetail({ post }) { return ( 
     
{post.title}
 
{post.content}
 
 ); } 

Это позволит динамически обновлять title и meta-теги для каждой страницы, что полезно для SEO.

Тестирование приложения с React Router

Тестирование компонентов, использующих React Router, может быть немного сложнее, чем тестирование обычных компонентов React. Вот пример того, как можно тестировать компонент с маршрутизацией с помощью библиотеки testing-library:

 import { render, screen } from '@testing-library/react'; import { MemoryRouter } from 'react-router-dom'; import App from './App'; test('navigates to post detail page', () => { render(    ); expect(screen.getByText('Детали поста')).toBeInTheDocument(); }); 

В этом примере мы используем MemoryRouter для имитации навигации в нашем тесте.

Обработка ошибок в маршрутах

React Router v6 предоставляет компонент ErrorBoundary для обработки ошибок в маршрутах. Вот пример его использования:

 import { Routes, Route, useRouteError } from 'react-router-dom'; function ErrorFallback() { const error = useRouteError(); return 
Произошла ошибка: {error.message}
; } function App() { return (  } errorElement={} /> } errorElement={} /> } errorElement={} />  ); } 

Теперь, если в любом из этих маршрутов произойдет ошибка, будет отображен компонент ErrorFallback.

Оптимизация производительности

При работе с большими приложениями, использующими React Router, важно учитывать производительность. Вот несколько советов по оптимизации:

1. Использование React.memo

Для компонентов, которые часто перерендериваются, но редко изменяются, можно использовать React.memo:

 const MemoizedNavigation = React.memo(Navigation); 

2. Кэширование данных

Если ваше приложение часто запрашивает одни и те же данные, рассмотрите возможность их кэширования:

 import { useMemo } from 'react'; function PostList({ posts }) { const sortedPosts = useMemo(() => { return [...posts].sort((a, b) => b.date - a.date); }, [posts]); return ( 
 {sortedPosts.map(post => 
{post.title}
)} 
 ); } 

3. Виртуализация списков

Для длинных списков можно использовать виртуализацию, чтобы рендерить только видимые элементы:

 import { FixedSizeList } from 'react-window'; function PostList({ posts }) { const Row = ({ index, style }) => ( 
 {posts[index].title} 
 ); return (  {Row}  ); } 

Интеграция с другими библиотеками

React Router хорошо интегрируется с другими популярными библиотеками React экосистемы. Рассмотрим несколько примеров:

Redux

При использовании Redux для управления состоянием приложения, можно интегрировать его с React Router с помощью библиотеки connected-react-router:

 import { ConnectedRouter } from 'connected-react-router'; import { Provider } from 'react-redux'; import { store, history } from './store'; function App() { return (   {/* Ваши маршруты */}   ); } 

Formik

Для работы с формами можно использовать библиотеку Formik. Вот пример создания формы для нового поста с использованием Formik и React Router:

 import { Formik, Form, Field } from 'formik'; import { useNavigate } from 'react-router-dom'; function CreatePost({ addPost }) { const navigate = useNavigate(); return (  { addPost(values); setSubmitting(false); navigate('/'); }} > 
   Создать пост   ); } 

Продвинутые техники маршрутизации

React Router предоставляет ряд продвинутых возможностей для сложных сценариев маршрутизации. Рассмотрим некоторые из них:

Условная маршрутизация

Иногда может потребоваться изменить маршрут на основе определенных условий. Вот пример реализации условной маршрутизации:

 function ConditionalRoute({ condition, component: Component, ...rest }) { return (  condition ?  :  } /> ); } function App() { const isLoggedIn = useSelector(state => state.auth.isLoggedIn); return (  Route path="/login" element={} />


);
}

Динамические маршруты

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

 function DynamicRoutes({ categories }) { return ( <> {categories.map(category => ( } /> ))}  ); } function App({ categories }) { return (  } />   ); } 

Рекурсивные маршруты

Для сложных структур данных, таких как древовидное меню, можно использовать рекурсивные маршруты:

 function RecursiveRoute({ routes }) { return ( <> {routes.map(route => (  {route.children && }  ))}  ); } const routes = [ { path: '/', element: , children: [ { path: 'blog', element: , children: [ { path: ':id', element:  } ] } ] } ]; function App() { return (    ); } 

Оптимизация загрузки данных

При работе с React Router важно оптимизировать загрузку данных для каждого маршрута. Рассмотрим несколько подходов:

1. Предварительная загрузка данных

Можно начать загрузку данных до того, как пользователь перейдет на страницу:

 import { Link, Outlet, useNavigate } from 'react-router-dom'; function PostList({ posts }) { const navigate = useNavigate(); const handleMouseEnter = (postId) => { // Начать загрузку данных поста prefetchPostData(postId); }; const handleClick = (e, postId) => { e.preventDefault(); // Завершить загрузку данных и перейти на страницу finishLoadingPostData(postId).then(() => { navigate(`/post/${postId}`); }); }; return ( 
 {posts.map(post => ( 
  handleMouseEnter(post.id)} onClick={(e) => handleClick(e, post.id)} > {post.title}  
 ))} 
 ); } 

2. Параллельная загрузка данных

Для улучшения производительности можно загружать данные параллельно:

 import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; function PostDetail() { const { id } = useParams(); const [post, setPost] = useState(null); const [comments, setComments] = useState([]); useEffect(() => { Promise.all([ fetch(`/api/posts/${id}`).then(res => res.json()), fetch(`/api/posts/${id}/comments`).then(res => res.json()) ]).then(([postData, commentsData]) => { setPost(postData); setComments(commentsData); }); }, [id]); if (!post) return 
Загрузка...
; return ( 
 
{post.title}
 
{post.content}
 
Комментарии:
 
 {comments.map(comment => ( 
{comment.text}
 ))} 
 
 ); } 

Обработка прокрутки при навигации

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

 import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } function App() { return ( <>   {/* Ваши маршруты */}   ); } 

Интернационализация (i18n) с React Router

Для создания многоязычного блога можно интегрировать React Router с библиотекой i18next:

 import { useTranslation } from 'react-i18next'; import { Routes, Route, Link } from 'react-router-dom'; function App() { const { t, i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( 
   {t('welcome')}} /> {t('about')}} />  
 ); } 

Кастомные хуки для работы с React Router

Для упрощения работы с React Router можно создать собственные хуки. Вот несколько примеров:

1. useQuery

Хук для удобной работы с параметрами запроса:

 import { useLocation } from 'react-router-dom'; function useQuery() { return new URLSearchParams(useLocation().search); } // Использование: function SearchResults() { const query = useQuery(); const searchTerm = query.get('q'); return 
Результаты поиска для: {searchTerm}
; } 

2. usePreviousLocation

Хук для отслеживания предыдущего местоположения:

 import { useEffect, useRef } from 'react'; import { useLocation } from 'react-router-dom'; function usePreviousLocation() { const { pathname } = useLocation(); const ref = useRef(); useEffect(() => { ref.current = pathname; }, [pathname]); return ref.current; } // Использование: function BackButton() { const previousLocation = usePreviousLocation(); const navigate = useNavigate(); return (  navigate(previousLocation || '/')}> Назад  ); } 

Оптимизация для мобильных устройств

При создании блога с React Router важно учитывать мобильные устройства. Вот несколько советов по оптимизации:

1. Адаптивный дизайн

Используйте медиа-запросы CSS для адаптации макета под различные размеры экрана:

 @media (max-width: 768px) { .container { padding: 10px; } .post-list { flex-direction: column; } } 

2. Оптимизация навигации

Создайте мобильное меню для улучшения навигации на малых экранах:

 import { useState } from 'react'; import { Link } from 'react-router-dom'; function MobileNavigation() { const [isOpen, setIsOpen] = useState(false); return (  ); } 

3. Оптимизация производительности

Используйте ленивую загрузку изображений и компонентов для улучшения производительности на мобильных устройствах:

 import { lazy, Suspense } from 'react'; const LazyImage = lazy(() => import('./LazyImage')); function PostDetail({ post }) { return ( 
 
{post.title}
 Загрузка изображения...
}>   
{post.content}