Как да използвате React Router V6: Ръководство за начинаещи

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

React Router V6 въвежда някои значителни промени в алгоритъма за маршрутизиране, за да се справи с клопките, които присъстваха в по-ранната му версия, и да предостави подобрено решение за маршрутизиране.

Първи стъпки с маршрутизиране с помощта на React Router V6

За да започнете, създайте приложение React. Алтернативно, настройте React проект с помощта на Vite. След като създадете проекта, продължете и инсталирайте реагират-рутер-дом пакет.

npm install react-router-dom

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

За да създадете маршрути, започнете, като обвиете цялото приложение с a BrowserRouter компонент. Актуализирайте кода във вашия 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>,
)

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

Използване на компонента Routes

След като опаковате приложението с компонента BrowserRouter, можете да дефинирате своите маршрути.

The Маршрути компонент е подобрение на Превключване компонент, който преди е бил използван от React Router v5. Този компонент поддържа относително маршрутизиране, автоматично класиране на маршрути и възможност за работа с вложени маршрути.

Обикновено ще добавите маршрути на най-високото ниво на вашето приложение, често в рамките на компонента на приложението. Можете обаче да ги дефинирате на всяко друго място, в зависимост от структурата на вашия проект.

Отвори App.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, който ви позволява да подадете функционален компонент, а не само името на компонента. Това прави възможно предаването на подпори по маршрутите и свързаните с тях компоненти.

В src директория, създайте нова страници директория и добавете два нови файла: Dashboard.jsx и About.jsx. Продължете и дефинирайте функционални компоненти в тези файлове, за да тествате маршрутите.

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

Документация на React Router препоръчва използването на createBrowserRouter компонент за определяне на конфигурацията за маршрутизиране за уеб приложения на React. Този компонент е лека алтернатива на BrowserRouter който приема масив от маршрути като аргумент.

Като използвате този компонент, няма нужда да дефинирате вашите маршрути в компонента на приложението. Вместо това можете да очертаете всичките си конфигурации на маршрута в рамките на 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>
);

Конфигурацията за маршрутизиране използва createBrowserRouter и RouterProvider компоненти за създаване на система за маршрутизиране за React приложение.

Въпреки това, единствената разлика с тази реализация е, че вместо да опакова приложението с помощта на компонента BrowserRouter, то използва RouterProvider компонент за предаване на Рутер контекст на всички компоненти в приложението.

Внедряване на маршрути за ненамерени страници

The път prop в компонента Route сравнява предоставения път с текущия URL, за да определи дали има съвпадение, преди да изобрази необходимия компонент.

За да се справите със случаи, в които няма съвпадение на маршрути, можете да създадете конкретен маршрут, който ще управлява Грешки 404 страницата не е намерена. Включването на този маршрут гарантира, че потребителите могат да получат смислени отговори в ситуации, в които са имали достъп до несъществуващ URL адрес.

За да внедрите маршрут 404, добавете този маршрут в компонента Routes:

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

След това създайте персонализирано NotFound.jsx компонент и накрая, стилизирайте компонента с помощта на CSS модули.

Звездицата (*) е заместващ знак, който обработва сценарии, при които нито един от посочените маршрути не съответства на текущия URL адрес.

Програмна навигация с помощта на куката useNavigate

The useNavigate hook осигурява програмен начин за обработка на навигацията в приложенията. Тази кука е особено полезна, когато искате да задействате навигация в отговор на потребителски взаимодействия или събития, като щраквания върху бутони или изпращане на формуляр.

Нека да разгледаме как да използваме useNavigate кука за програмна навигация. Ако приемем, че сте създали About.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 Hook

Тази кука ви позволява да дефинирате пътищата на маршрута заедно със съответните им компоненти в рамките на обект. След това куката се използва за съпоставяне на маршрутите и показване на съответните компоненти.

Ето прост пример за това как да използвате куката:

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 пътища към компоненти. The Приложение компонент след това използва тази кука, за да съпостави текущия URL адрес и да изобрази подходящия компонент въз основа на съвпадащия маршрут.

Използването на тази кука ви дава подробен контрол върху вашата логика за маршрутизиране и ви позволява лесно да създавате персонализирана логика за обработка на маршрути за вашето приложение.

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

Въпреки че самият React не включва предварително изграден механизъм за обработка на задачи за маршрутизиране, React Router запълва тази празнина. Той предоставя различни компоненти за маршрутизиране и помощни функции, които лесно можете да използвате за създаване на интерактивни, удобни за потребителя приложения.