logo

TechCodeview

Reaģēt maršrutētāju

Reaģēt maršrutētāju , ir jūsu būtisks rīks vienas lapas lietojumprogrammu (SPA) izveidei. Iedomājieties, ka lietotāji bez piepūles pāriet no vienas sadaļas uz citu, izmantojot jūsu vietni kā plūstošu lietotni, un React Router to padara iespējamu, paverot ceļu apburošai lietotāja pieredzei un mūsdienīgai klātbūtnei tīmeklī. React vietnei nevajadzētu nozīmēt, ka liela lapa tiek atkārtoti ielādēta ikreiz, kad lietotāji pārvietojas.

Šis raksts palīdz jums iepazīt React Router pasauli, un jūs uzzināsit par React Router koncepciju un tā iespējām. Sekojiet jaunumiem, lai atraisītu vienmērīgas navigācijas iespējas un paceltu savus React projektus nākamajā līmenī!

Satura rādītājs



Tā kā programmā React nav iebūvēta maršrutēšanas, React JS maršrutētājs nodrošina maršrutēšanas atbalstu programmā React un navigāciju uz dažādiem komponentiem vairāku lapu lietojumprogrammās. Tas atveido komponentus atbilstošiem maršrutiem un piešķirtajiem URL.

formāta virkne java

Kas ir React maršrutētājs?

Reaģēt maršrutētāju ir standarta bibliotēka maršrutēšanai Reaģēt . Tas nodrošina navigāciju starp dažādu komponentu skatiem React lietojumprogrammā, ļauj mainīt pārlūkprogrammas URL un uztur lietotāja interfeisu sinhronizācijā ar URL. Izveidosim vienkāršu lietojumprogrammu React, lai saprastu, kā darbojas React Router. Pieteikumā būs trīs komponenti mājas sastāvdaļa , Par komponentu , un kontakta sastāvdaļa . Mēs izmantosim React Router, lai pārvietotos starp šiem komponentiem.

React maršrutētāja lietošanas soļi

1. darbība: Inicializējiet reakcijas projektu. Pārbaudiet šo ziņu lietotnes React iestatīšana

2. darbība: Instalējiet react-router savā lietojumprogrammā, terminālī ierakstiet šādu komandu

npm i react-router-dom>

Solis 3: React maršrutētāja importēšana

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

Mapes struktūra:

js komplekts

direktorija_struktūra

Atjauninātās atkarības pack.json failu.

'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' },>

Reaģēt uz maršrutētāja komponentiem

Galvenās React maršrutētāja sastāvdaļas ir:

  • BrowserRouter : BrowserRouter ir maršrutētāja implementācija, kas izmanto HTML5 vēstures API (pushState, changeState un popstate notikumu), lai UI sinhronizētu ar URL. Tas ir vecāku komponents, ko izmanto visu pārējo komponentu glabāšanai.
  • Maršruti : tas ir jauns komponents, kas ieviests v6, un komponenta jauninājums. Galvenās Routes priekšrocības salīdzinājumā ar Switch ir:
    • Radinieki s un s
    • Maršruti tiek izvēlēti, pamatojoties uz labāko atbilstību, nevis tos šķērsojot secībā.
  • Maršruts: Maršruts ir nosacīti parādīts komponents, kas atveido kādu lietotāja interfeisu, ja tā ceļš atbilst pašreizējam URL.
  • Saite: Saites komponents tiek izmantots, lai izveidotu saites uz dažādiem maršrutiem un ieviestu navigāciju ap lietojumprogrammu. Tas darbojas kā HTML enkura tags.

React maršrutētāja ieviešana

Piemērs: Šajā piemērā ir parādīta navigācija, izmantojot react-router-dom uz Home, About un Contact Components.

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 (    
  
      
  •   Mājas  
    •   
  •   Par mums  
    •   
  •   Sazinies ar mums  
    •   
    }>  }>  }>    
  );  } } eksportēt noklusējuma lietotni;>>JavascriptLaipni lūdzam Geeks pasaulē!; } eksportēt noklusējuma sākumlapu;>>Javascript  
techcodeview.com ir datorzinātņu portāls dīķiem!
Vairāk par mums lasiet: Mūs varat atrast šeit: 
techcodeview.com 
5th & 6th Floor, Royal Kapsons, A-118, 
Sector-136, Noida, Uttar Pradesh (201305)); } eksportēt noklusējuma kontaktpersonu;>> 
    Lietojumprogrammas palaišanas darbība:    Atveriet termināli un ierakstiet šādu komandu.
     Izvade:    Atveriet pārlūkprogrammu, un mūsu projekts tiek parādīts URL      http://localhost:3000/      . Tagad jūs varat noklikšķināt uz saitēm un pāriet uz dažādiem komponentiem. React Router nodrošina jūsu lietojumprogrammas lietotāja interfeisa sinhronizāciju ar URL.
  
Visbeidzot, mēs esam veiksmīgi ieviesuši navigāciju mūsu React lietojumprogrammā, izmantojot React Router.