logo

TechCodeview

React Router

React Router , er dit essentielle værktøj til at bygge single-page applications (SPA'er). Forestil dig, at brugere ubesværet skifter mellem sektioner, oplever din hjemmeside som en flydende app, og React Router gør det muligt, hvilket baner vejen for en dejlig brugeroplevelse og en moderne tilstedeværelse på nettet. Et React-websted bør ikke betyde, at en stor side genindlæses, hver gang brugere navigerer.

Denne artikel hjælper dig med at guide til verden af ​​React Router, og du vil lære om React Router-konceptet og dets muligheder. Hold dig opdateret for at låse op for potentialet for jævn navigation og løfte dine React-projekter til næste niveau!

Indholdsfortegnelse



få array længde i c

Da der ikke er nogen indbygget routing i React, muliggør React JS Router routingunderstøttelse i React og navigation til forskellige komponenter i flersidede applikationer. Det gengiver komponenter til tilsvarende ruter og tildelte URL'er.

Hvad er en React Router?

Reager Router er et standardbibliotek til routing i Reagere . Det muliggør navigation mellem visninger af forskellige komponenter i en React-applikation, gør det muligt at ændre browser-URL'en og holder brugergrænsefladen synkroniseret med URL'en. Lad os oprette en simpel applikation til React for at forstå, hvordan React-routeren fungerer. Ansøgningen vil indeholde tre komponenter hjemmekomponent , det Om komponent , og kontakt komponent . Vi vil bruge React Router til at navigere mellem disse komponenter.

hvad er autowired i java

Trin til brug af React Router

Trin 1: Initialiser et reaktionsprojekt. Tjek dette indlæg for opsætning af React app

Trin 2: Installer react-router i din applikation, skriv følgende kommando i din terminal

npm i react-router-dom>

Trin 3: Importerer React Router

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

Mappestruktur:

directory_structure

Hent youtube-videoer med vlc

De opdaterede afhængigheder 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 Router-komponenter

Hovedkomponenterne i React Router er:

  • BrowserRouter : BrowserRouter er en routerimplementering, der bruger HTML5 History API (pushState, replaceState og popstate-hændelsen) til at holde din UI synkroniseret med URL'en. Det er den overordnede komponent, der bruges til at gemme alle de andre komponenter.
  • Ruter : Det er en ny komponent introduceret i v6 og en opgradering af komponenten. De vigtigste fordele ved Routes over Switch er:
    • Pårørende s og s
    • Ruter vælges ud fra det bedste match i stedet for at blive krydset i rækkefølge.
  • Rute: Rute er den betinget viste komponent, der gengiver en UI, når dens sti matcher den aktuelle URL.
  • Link: Link-komponenten bruges til at oprette links til forskellige ruter og implementere navigation rundt i applikationen. Det fungerer som et HTML-ankertag.

Implementering af React Router

Eksempel: Dette eksempel viser navigation ved hjælp af 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 os  
    •   
  •   Kontakt os  
    •   
    }>  }>  }>    
  );  } } eksporter standardapp;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Velkommen til nørdernes verden!
; } eksporter standard Hjem;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com er en datalogisk portal for nørder!
Læs mere om os på:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Du kan finde os her: 
techcodeview.com 
5. og 6. etage, Royal Kapsons, A-118, 
Sektor-136, Noida, Uttar Pradesh (201305)
); } eksporter standardkontakt;>
  
    Trin for at køre applikationen:    Åbn terminalen og skriv følgende kommando.
 
npm start>
    Produktion:    Åbn browseren og vores projekt vises i URL'en      http://localhost:3000/      . Nu kan du klikke på linkene og navigere til forskellige komponenter. React Router holder din applikations brugergrænseflade synkroniseret med URL'en.
javascript print

  
Endelig har vi med succes implementeret navigation i vores React-applikation ved hjælp af React Router.