Како користити Реацт Роутер В6: Водич за почетнике

Реацт Роутер је најпопуларнија библиотека коју можете користити за имплементацију рутирања у Реацт апликацијама. Пружа приступ заснован на компонентама за руковање разним задацима рутирања, укључујући навигацију по страници, параметре упита и још много тога.

Реацт Роутер В6 уводи неке значајне промене у алгоритам рутирања, како би се позабавио замкама које су биле присутне у његовој ранијој верзији, и обезбедио побољшано решење за рутирање.

Почетак рада са рутирањем помоћу Реацт Роутер В6

Започети, креирајте Реацт апликацију. Алтернативно, поставите Реацт пројекат користећи Вите. Након креирања пројекта, наставите и инсталирајте реаговати-рутер-дом пакет.

npm install react-router-dom

Креирање рута помоћу Реацт рутера

Да бисте креирали руте, почните тако што ћете омотати целу апликацију са а БровсерРоутер саставни део. Ажурирајте код у свом индек.јск или маин.јск фајл на следећи начин:

import React from'react'





instagram viewer


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>,
)

Обмотавање компоненте апликације компонентом БровсерРоутер осигурава да цела апликација добије приступ контексту рутирања и функцијама које нуди библиотека Реацт Роутер.

Коришћење компоненте руте

Када обавите апликацију са компонентом БровсерРоутер, можете да дефинишете своје руте.

Тхе Руте компонента је побољшање Свитцх компонента коју је раније користио Реацт Роутер в5. Ова компонента подржава релативно рутирање, аутоматско рангирање рута и могућност рада са угнежђеним рутама.

Обично ћете додати руте на највишем нивоу своје апликације, често унутар компоненте апликације. Међутим, можете их дефинисати на било којој другој локацији, у зависности од структуре вашег пројекта.

Отвори Апп.јск датотеку и замените шаблон Реацт кода следећим:

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

Ова конфигурација рутирања мапира одређене УРЛ путање на одговарајуће компоненте странице (Контролна табла и Абоут), обезбеђујући да апликација приказује одговарајућу компоненту када корисник посети одређену УРЛ.

Обратите пажњу на елемент проп, у оквиру компоненте Роуте, која вам омогућава да проследите функционалну компоненту, а не само име компоненте. Ово омогућава преношење реквизита низ руте и њихове повезане компоненте.

У срц директоријум, креирајте нови странице директоријум и додајте две нове датотеке: Дасхбоард.јск и Абоут.јск. Наставите и дефинишите функционалне компоненте унутар ових датотека да бисте тестирали руте.

Коришћење цреатеБровсерРоутер-а за дефинисање рута

Реацт Роутер документација препоручује коришћење цреатеБровсерРоутер компонента за дефинисање конфигурације рутирања за Реацт веб апликације. Ова компонента је лагана алтернатива БровсерРоутер који за свој аргумент узима низ рута.

Коришћењем ове компоненте, нема потребе да дефинишете своје руте унутар компоненте апликације. Уместо тога, можете оцртати све своје конфигурације руте у оквиру индек.јск или маин.јск фајл.

Ево примера како можете да користите ову компоненту:

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>
);

Конфигурација рутирања користи цреатеБровсерРоутер и РоутерПровидер компоненте за креирање система рутирања за Реацт апликацију.

Међутим, једина разлика са овом имплементацијом је у томе што, уместо да омота апликацију помоћу компоненте БровсерРоутер, она користи РоутерПровидер компонента за пролазак Рутер контекст за све компоненте у апликацији.

Имплементација рута које нису пронађене странице

Тхе пут проп у компоненти Роуте упоређује пружену путању са тренутним УРЛ-ом да би утврдио да ли постоји подударање пре приказивања потребне компоненте.

Да бисте обрадили случајеве у којима се ниједна рута не подудара, можете креирати одређену руту која ће управљати 404 страница није пронађена грешка. Укључивање ове руте осигурава да корисници могу да добију смислене одговоре у ситуацијама када су приступили непостојећој УРЛ адреси.

Да бисте имплементирали руту 404, додајте ову руту у компоненту Руте:

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

Затим креирајте прилагођено НотФоунд.јск компонента и коначно, стилизујте компоненту користећи ЦСС модуле.

Звездица (*) је џокер знак који обрађује сценарије у којима ниједна од наведених рута не одговара тренутној УРЛ адреси.

Програмска навигација Коришћење куке усеНавигате

Тхе усеНавигате кука пружа програмски начин управљања навигацијом у апликацијама. Ова кука је посебно корисна када желите да покренете навигацију као одговор на интеракције корисника или догађаје, као што су кликови на дугме или слање обрасца.

Хајде да погледамо како да користимо усеНавигате кука за програмску навигацију. Под претпоставком да сте креирали Абоут.јск функционалну компоненту, увезите куку из Реацт Роутер пакета:

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

Затим додајте дугме које, када се кликне, покреће навигацију до одређене руте.

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

 </>
 );
}
exportdefault About;

Вреди напоменути да кука усеНавигате и кука усеНавигатион, уведена у Реацт Роутер в6, служе различитим сврхама упркос њиховим блиско повезаним именима.

УсеНавигатион кука вам омогућава да приступите детаљима везаним за навигацију, као што је стање навигације у току и друге специфичности. Ово је корисно када желите да прикажете елементе корисничког интерфејса као што су спинери за учитавање да бисте пружили визуелне повратне информације о текућим процесима.

Ево примера како можете да користите усеНавигатион куку.

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>;
}

У овом примеру, СубмитБуттон компонента ће динамички ажурирати свој текст на основу стања навигације добијеног од усеНавигатион куке.

Иако ове куке имају различите улоге, и даље их можете користити заједно. УсеНавигате кука за покретање процеса навигације и усеНавигатион кука за преузимање детаља навигације у реалном времену, који затим усмеравају врсту корисничког интерфејса за повратне информације за приказивање у претраживачу.

Коришћење куке усеРоутес

Ова кука вам омогућава да дефинишете путање руте поред њихових одговарајућих компоненти унутар објекта. Затим се кука користи за усклађивање рута и приказивање релевантних компоненти.

Ево једноставног примера како да користите куку:

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;

У овом примеру, руте објекат дефинише мапирање УРЛ путања у компоненте. Тхе Апликација компонента затим користи ову куку за подударање са тренутним УРЛ-ом и рендерује одговарајућу компоненту на основу подударне руте.

Коришћење ове куке вам даје детаљну контролу над вашом логиком рутирања и омогућава вам да лако креирате прилагођену логику руковања рутама за вашу апликацију.

Руковање рутирањем у Реацт апликацијама

Иако сам Реацт не укључује унапред изграђен механизам за руковање задацима рутирања, Реацт Роутер попуњава ову празнину. Пружа различите компоненте за рутирање и услужне функције које можете лако користити за креирање интерактивних апликација прилагођених кориснику.