logo

TechCodeview

Reager Router

Reager Router , er ditt viktige verktøy for å bygge enkeltsideapplikasjoner (SPA). Se for deg at brukere enkelt skifter mellom seksjoner, opplever nettstedet ditt som en flytende app og React Router gjør det mulig, og baner vei for en herlig brukeropplevelse og en moderne tilstedeværelse på nettet. Et React-nettsted bør ikke bety at en stor side lastes inn på nytt hver gang brukere navigerer.

Denne artikkelen hjelper deg med å veilede til verden av React Router, og du vil lære om React Router-konseptet, og dets muligheter. Følg med for å frigjøre potensialet for jevn navigering og løfte React-prosjektene dine til neste nivå!

Innholdsfortegnelse



få matriselengde i c

Siden det ikke er innebygd ruting i React, muliggjør React JS Router rutingstøtte i React og navigering til forskjellige komponenter i flersidesapplikasjoner. Den gjengir komponenter for tilsvarende ruter og tildelte URL-er.

Hva er en React Router?

Reager Router er et standard bibliotek for ruting inn Reagere . Det muliggjør navigering mellom visninger av ulike komponenter i en React-applikasjon, gjør det mulig å endre nettleserens URL, og holder brukergrensesnittet synkronisert med URL-en. La oss lage en enkel applikasjon for React for å forstå hvordan React-ruteren fungerer. Søknaden vil inneholde tre komponenter hjemmekomponent , den Om komponent , og kontaktkomponent . Vi vil bruke React Router for å navigere mellom disse komponentene.

strsep c

Trinn for å bruke React Router

Trinn 1: Initialiser et reaksjonsprosjekt. Sjekk dette innlegget for sette opp React-appen

Steg 2: Installer react-router i applikasjonen din, skriv følgende kommando i terminalen din

npm i react-router-dom>

Steg 3: Importerer React Router

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

Mappestruktur:

katalogstruktur

c# datetime

De oppdaterte avhengighetene i package.json fil.

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

React-ruterkomponenter

Hovedkomponentene til React Router er:

  • Nettleserruter : BrowserRouter er en ruterimplementering som bruker HTML5 History API (pushState, replaceState og popstate-hendelsen) for å holde brukergrensesnittet ditt synkronisert med URL-en. Det er den overordnede komponenten som brukes til å lagre alle de andre komponentene.
  • Ruter : Det er en ny komponent introdusert i v6 og en oppgradering av komponenten. De viktigste fordelene med ruter fremfor bytte er:
    • Pårørende s og s
    • Ruter velges basert på den beste matchen i stedet for å krysses i rekkefølge.
  • Rute: Rute er den betinget viste komponenten som gjengir et brukergrensesnitt når banen samsvarer med gjeldende URL.
  • Link: Koblingskomponenten brukes til å lage lenker til ulike ruter og implementere navigasjon rundt applikasjonen. Det fungerer som en HTML-ankerkode.

Implementering av React Router

Eksempel: Dette eksemplet viser navigasjon ved hjelp av react-router-dom til Home, About og 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 (    
  
      
  •   Hjem  
    •   
  •   Om oss  
    •   
  •   Kontakt oss  
    •   
    }>  }>  }>    
  );  } } eksporter standard app;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Velkommen til en verden av geeks!
; } eksporter standard Hjem;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com er en informatikkportal for nerder!
Les mer om oss på:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Du finner oss her: 
techcodeview.com 
5. og 6. etasje, Royal Kapsons, A-118, 
Sektor-136, Noida, Uttar Pradesh (201305)
); } eksporter standard kontakt;>
  
    Trinn for å kjøre applikasjonen:    Åpne terminalen og skriv inn følgende kommando.
 
npm start>
    Produksjon:    Åpne nettleseren og prosjektet vårt vises i URL-en      http://localhost:3000/      . Nå kan du klikke på lenkene og navigere til forskjellige komponenter. React Router holder applikasjonens brukergrensesnitt synkronisert med URL-en.
java-operatører

  
Endelig har vi implementert navigasjon i vår React-applikasjon med React Router.