Как использовать React Router V6: руководство для начинающих

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

React Router V6 вносит некоторые существенные изменения в алгоритм маршрутизации, чтобы устранить ошибки, которые присутствовали в его более ранней версии, и обеспечить улучшенное решение маршрутизации.

Начало работы с маршрутизацией с использованием React Router V6

Для начала, создать приложение React. Альтернативно, настроить проект React с помощью Vite. После создания проекта приступайте к установке реакция-маршрутизатор-дом упаковка.

npm install react-router-dom

Создание маршрутов с использованием React Router

Чтобы создать маршруты, начните с упаковки всего приложения в БраузерМаршрутизатор компонент. Обновите код в вашем index.jsx или main.jsx файл следующим образом:

import React from'react'
import ReactDOM from'react-dom/client'
import App from'./App.jsx'
import { BrowserRouter as Router } from'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(



 </Router>
 </React.StrictMode>,
)

Обертывание компонента App компонентом BrowserRouter гарантирует, что все приложение получит доступ к контексту маршрутизации и функциям, предлагаемым библиотекой React Router.

Использование компонента маршрутов

После того как вы обернули приложение компонентом BrowserRouter, вы можете определить свои маршруты.

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

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

Открой Приложение.jsx файл и замените шаблонный код React следующим:

import'./App.css'
import { Routes, Route } from'react-router-dom';
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
functionApp() {
return (
 <>

"/" element={} />
"/about" element={} />
 </Routes>
 </>
 )
}
exportdefault App

Эта конфигурация маршрутизации сопоставляет определенные URL-пути с соответствующими компонентами страницы (Панель мониторинга и «О программе»), гарантируя, что приложение отображает соответствующий компонент, когда пользователь посещает определенный URL-адрес.

Обратите внимание на элемент prop внутри компонента Route, который позволяет передавать функциональный компонент, а не только имя компонента. Это позволяет передавать реквизиты по маршрутам и связанным с ними компонентам.

в источник каталог, создайте новый страницы каталог и добавьте два новых файла: Панель мониторинга.jsx и О.jsx. Определите функциональные компоненты в этих файлах, чтобы протестировать маршруты.

Использование createBrowserRouter для определения маршрутов

Документация React Router рекомендует использовать СоздатьБраузерМаршрутизатор компонент для определения конфигурации маршрутизации для веб-приложений React. Этот компонент является облегченной альтернативой БраузерМаршрутизатор который принимает массив маршрутов в качестве аргумента.

Используя этот компонент, вам не нужно определять маршруты внутри компонента приложения. Вместо этого вы можете описать все конфигурации вашего маршрута в index.jsx или main.jsx файл.

Вот пример того, как вы можете использовать этот компонент:

import React from'react'
import ReactDOM from'react-dom/client'
import { createBrowserRouter, RouterProvider } from"react-router-dom";
import App from'./App.jsx'
import Dashboard from'./pages/Dashboard';
import About from'./pages/About';
const router = createBrowserRouter([
 {
 path: "/",
 element: <App />,
 },
 {
 path: "/dashboard",
 element: <Dashboard />,
 },
 {
 path: "/about",
 element: <About />,
 },
]);
ReactDOM.createRoot(document.getElementById("root")).render(


 </React.StrictMode>
);

В конфигурации маршрутизации используется СоздатьБраузерМаршрутизатор и МаршрутизаторПровайдер компоненты для создания системы маршрутизации для приложения React.

Однако единственное отличие этой реализации состоит в том, что вместо оболочки приложения с помощью компонента BrowserRouter используется МаршрутизаторПровайдер компонент для передачи Маршрутизатор контекст для всех компонентов приложения.

Реализация маршрутов «страница не найдена»

путь prop в компоненте Route сравнивает предоставленный путь с текущим URL-адресом, чтобы определить, есть ли совпадение, прежде чем отрисовывать требуемый компонент.

Чтобы обрабатывать случаи, когда ни один маршрут не соответствует, вы можете создать специальный маршрут, который будет управлять 404 страница не найдена ошибки. Включение этого маршрута гарантирует, что пользователи смогут получать содержательные ответы в ситуациях, когда они обращаются к несуществующему URL-адресу.

Чтобы реализовать маршрут 404, добавьте этот маршрут в компонент Routes:

// using the Route component
"*" element={} /> 
// using createBrowserRouter
{ path: "*", element: <NotFound />, },

Затем создайте собственный NotFound.jsx компонент и, наконец, стилизовать компонент с помощью модулей CSS.

Звездочка (*) — это подстановочный знак, который используется в сценариях, в которых ни один из указанных маршрутов не соответствует текущему URL-адресу.

Программная навигация с использованием хука useNavigate

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

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

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

Затем добавьте кнопку, нажатие которой запускает навигацию по указанному маршруту.

functionAbout() {
const navigate = useNavigate();
const handleButtonClick = () => {
 navigate("/");
 };
return (
 <>
// Rest of the code ...

 </>
 );
}
exportdefault About;

Стоит отметить, что крючок useNavigate и крючок useNavigation, представленные в React Router v6, служат разным целям, несмотря на их тесно связанные имена.

Хук useNavigation позволяет вам получить доступ к деталям, связанным с навигацией, например, к текущему состоянию навигации и другим особенностям. Это полезно, если вы хотите визуализировать элементы пользовательского интерфейса, такие как индикаторы загрузки, чтобы обеспечить визуальную обратную связь о текущих процессах.

Вот пример того, как вы можете использовать хук useNavigation.

import { useNavigation } from"react-router-dom";
functionSubmitButton() {
const navigation = useNavigation();
const buttonText =
 navigation.state "submitting"
? "Saving..."
: navigation.state "loading"
? "Saved!"
: "Go";
return<buttontype="submit">{buttonText}button>;
}

В этом примере ОтправитьКнопка Компонент будет динамически обновлять свой текст на основе состояния навигации, полученного с помощью перехватчика useNavigation.

Несмотря на то, что эти хуки имеют разные роли, вы все равно можете использовать их вместе. Хук useNavigate для инициации процесса навигации и хук useNavigation для получения сведений о навигации в реальном времени, которые затем определяют тип пользовательского интерфейса обратной связи для отображения в браузере.

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

Этот хук позволяет вам определять пути маршрутов вместе с соответствующими компонентами внутри объекта. Впоследствии перехватчик используется для сопоставления маршрутов и отображения соответствующих компонентов.

Вот простой пример использования хука:

import { useRoutes } from'react-router-dom';
import Dashboard from'./Dashboard';
import About from'./About';
const routes = [
 {
 path: '/',
 element: <Dashboard/>,
 },
 {
 path: '/about',
 element: <About />,
 },
];
functionApp() {
const routeResult = useRoutes(routes);
return routeResult;
}
exportdefault App;

В этом примере маршруты Объект определяет сопоставление URL-путей с компонентами. Приложение Затем компонент использует этот крючок для сопоставления текущего URL-адреса и отображения соответствующего компонента на основе сопоставленного маршрута.

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

Обработка маршрутизации в приложениях React

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