logo

TechCodeview

Reaguoti maršrutizatorius

Reaguoti maršrutizatorius , yra pagrindinis įrankis kuriant vieno puslapio programas (SPA). Įsivaizduokite, kad naudotojai be vargo pereina iš vienos skilties į kitą, naudoja jūsų svetainę kaip sklandžią programą, o „React Router“ leidžia tai padaryti, o tai atveria kelią nuostabiai naudotojo patirčiai ir šiuolaikiškam buvimui žiniatinklyje. „React“ svetainė neturėtų reikšti, kad didelis puslapis įkeliamas iš naujo kiekvieną kartą, kai naudotojai naršo.

10 procentų iš 60

Šis straipsnis padės jums susipažinti su „React Router“ pasauliu ir sužinosite apie „React Router“ koncepciją ir jos galimybes. Stebėkite naujienas, kad atskleistumėte sklandaus naršymo galimybes ir pakeltumėte savo „React“ projektus į kitą lygį!

Turinys



Kadangi „React“ nėra integruoto maršruto nustatymo, „React JS Router“ įgalina maršruto palaikymą „React“ ir naršymą į skirtingus komponentus kelių puslapių programose. Jis pateikia atitinkamų maršrutų ir priskirtų URL komponentus.

Kas yra „React Router“?

Reaguoti maršrutizatorius yra standartinė biblioteka, skirta nukreipti Reaguoti . Tai leidžia naršyti tarp įvairių „React“ programos komponentų rodinių, pakeisti naršyklės URL ir sinchronizuoti vartotojo sąsają su URL. Sukurkime paprastą programą „React“, kad suprastume, kaip veikia „React Router“. Programą sudarys trys komponentai namų komponentas , Apie komponentą , ir kontaktinis komponentas . Norėdami naršyti tarp šių komponentų, naudosime „React Router“.

„React Router“ naudojimo veiksmai

1 žingsnis: Inicijuokite reagavimo projektą. Patikrinkite šį įrašą nustatydami programą „React“.

2 žingsnis: Įdiekite react-router savo programoje, terminale parašykite šią komandą

npm i react-router-dom>

Žingsnis 3: „React Router“ importavimas

import { BrowserRouter, Routes, Route } from 'react-router-dom';>

Aplanko struktūra:

katalogo_struktūra

Atnaujintos priklausomybės package.json failą.

'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-router-dom': '^6.22.1',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' },>

Reaguoti maršrutizatoriaus komponentus

Pagrindiniai „React Router“ komponentai yra šie:

  • BrowserRouter : BrowserRouter yra maršrutizatoriaus diegimas, kuris naudoja HTML5 istorijos API (pushState, replaceState ir popstate įvykį), kad jūsų vartotojo sąsaja būtų sinchronizuota su URL. Tai pagrindinis komponentas, naudojamas visiems kitiems komponentams saugoti.
  • Maršrutai : tai naujas komponentas, pristatytas v6 ir komponento atnaujinimas. Pagrindiniai maršrutų pranašumai, palyginti su Switch, yra šie:
    • Giminės s ir s
    • Maršrutai parenkami pagal geriausią atitiktį, o ne eiti eilės tvarka.
  • Maršrutas: Maršrutas yra sąlygiškai rodomas komponentas, kuris pateikia tam tikrą vartotojo sąsają, kai jos kelias atitinka dabartinį URL.
  • Nuoroda: Nuorodų komponentas naudojamas kuriant nuorodas į skirtingus maršrutus ir diegiant navigaciją programoje. Tai veikia kaip HTML inkaro žyma.

„React Router“ diegimas

Pavyzdys: Šiame pavyzdyje rodomas naršymas naudojant react-router-dom į Home, About ir Contact komponentus.

Javascript 
// Filename - App.js import React, { Component } from 'react'; import {  BrowserRouter as Router,  Routes,  Route,  Link, } from 'react-router-dom'; import Home from './component/home'; import About from './component/about'; import Contact from './component/contact'; import './App.css'; class App extends Component {  render() {  return (    
  
      
  •   Namai  
    •   
  •   Apie mus  
    •   
  •   Susisiekite su mumis  
    •   
    }>  }>  }>    
  );  } } eksportuoti numatytąją programą;>>JavascriptSveiki atvykę į Geeks pasaulį!; } eksportuoti numatytąjį pagrindinį puslapį;>>Javascript  
techcodeview.com yra kompiuterių mokslo portalas, skirtas geeks!
Daugiau apie mus skaitykite adresu: Mus galite rasti čia: 
techcodeview.com 
5th ir 6th Floor, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305)); } eksportuoti numatytąjį kontaktą;>> 
    Programos paleidimo veiksmas:    Atidarykite terminalą ir įveskite šią komandą.
     Išvestis:    Atidarykite naršyklę ir mūsų projektas bus rodomas URL      http://localhost:3000/      . Dabar galite spustelėti nuorodas ir pereiti prie skirtingų komponentų. „React Router“ palaiko programos vartotojo sąsają sinchronizuojant su URL.
  
Galiausiai, mes sėkmingai įdiegėme navigaciją mūsų React programoje naudodami React Router.