logo

TechCodeview

React Router

React Router , je vaše bistveno orodje za izdelavo enostranskih aplikacij (SPA). Predstavljajte si, da uporabniki brez napora prehajajo med razdelki, vaše spletno mesto doživljajo kot tekočo aplikacijo in React Router to omogoča, s čimer utira pot čudoviti uporabniški izkušnji in sodobni spletni prisotnosti. Spletno mesto React ne bi smelo pomeniti, da se velika stran znova naloži vsakič, ko uporabniki krmarijo.

Ta članek vam pomaga pri vodenju v svet usmerjevalnika React in izvedeli boste o konceptu usmerjevalnika React in njegovih zmožnostih. Ostanite z nami, da odklenete potencial gladke navigacije in dvignete svoje projekte React na višjo raven!

Kazalo



Ker v Reactu ni vgrajenega usmerjanja, React JS Router omogoča podporo za usmerjanje v Reactu in navigacijo do različnih komponent v večstranskih aplikacijah. Upodablja komponente za ustrezne poti in dodeljene URL-je.

Kaj je usmerjevalnik React?

React Router je standardna knjižnica za usmerjanje Reagiraj . Omogoča navigacijo med pogledi različnih komponent v aplikaciji React, omogoča spreminjanje URL-ja brskalnika in ohranja uporabniški vmesnik sinhroniziran z URL-jem. Ustvarimo preprosto aplikacijo za React, da bomo razumeli, kako deluje React Router. Aplikacija bo vsebovala tri komponente domača komponenta , the O komponenti , in kontaktna komponenta . Za krmarjenje med temi komponentami bomo uporabili React Router.

Koraki za uporabo usmerjevalnika React

Korak 1: Inicializirajte odzivni projekt. Preverite to objavo za nastavitev aplikacije React

2. korak: Namestite react-router v svojo aplikacijo, v svoj terminal napišite naslednji ukaz

arraylist sort 
npm i react-router-dom>

korak 3: Uvoz usmerjevalnika React

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

Struktura mape:

operacijski sistemi mac

struktura_imenika

Posodobljene odvisnosti v package.json mapa.

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

Komponente usmerjevalnika React

Glavne komponente usmerjevalnika React so:

  • BrowserRouter : BrowserRouter je implementacija usmerjevalnika, ki uporablja API za zgodovino HTML5 (pushState, replaceState in dogodek popstate), da vaš uporabniški vmesnik ostane sinhroniziran z URL-jem. To je nadrejena komponenta, ki se uporablja za shranjevanje vseh drugih komponent.
  • Poti : To je nova komponenta, predstavljena v v6, in nadgradnja komponente. Glavne prednosti Routes pred Switch so:
    • Relativni s in s
    • Poti so izbrane na podlagi najboljšega ujemanja, namesto da bi jih prehodili po vrstnem redu.
  • Pot: Route je pogojno prikazana komponenta, ki upodablja nek uporabniški vmesnik, ko se njegova pot ujema s trenutnim URL-jem.
  • Povezava: Komponenta povezave se uporablja za ustvarjanje povezav do različnih poti in izvajanje navigacije po aplikaciji. Deluje kot sidrna oznaka HTML.

Implementacija React Routerja

primer: Ta primer prikazuje navigacijo z uporabo react-router-dom do komponent Home, About in Contact.

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 (    
  
      
  •   domov  
    •   
  •   O nas  
    •   
  •   Kontaktiraj nas  
    •   
    }>  }>  }>    
  );  } } izvoz privzete aplikacije;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Dobrodošli v svetu Geekov!
; } izvoz privzetega doma;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com je računalniški portal za geeke!
Preberite več o nas na:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Najdete nas tukaj: 
techcodeview.com 
5. in 6. nadstropje, Royal Kapsons, A- 118, 
Sector- 136, Noida, Uttar Pradesh (201305)
); } izvoz privzetega stika;>
  
    Korak za zagon aplikacije:    Odprite terminal in vnesite naslednji ukaz.
 
npm start>
    Izhod:    Odprite brskalnik in naš projekt bo prikazan v URL-ju      http://localhost:3000/      . Zdaj lahko kliknete povezave in se pomaknete do različnih komponent. React Router ohranja uporabniški vmesnik vaše aplikacije sinhroniziran z URL-jem.
  
Končno smo uspešno implementirali navigacijo v naši aplikaciji React z uporabo React Routerja.