logo

TechCodeview

Reager Router

Reager Router , är ditt viktiga verktyg för att bygga ensidiga applikationer (SPA). Föreställ dig att användare enkelt växlar mellan sektioner, upplever din webbplats som en flytande app och React Router gör det möjligt, vilket banar väg för en härlig användarupplevelse och en modern webbnärvaro. En React-webbplats bör inte betyda att en stor sida laddas om varje gång användare navigerar.

Den här artikeln hjälper dig att guida till världen av React Router och du kommer att lära dig om React Router-konceptet och dess möjligheter. Håll dig uppdaterad för att låsa upp potentialen för smidig navigering och lyfta dina React-projekt till nästa nivå!

Innehållsförteckning



Eftersom det inte finns någon inbyggd routing i React, möjliggör React JS Router routingstöd i React och navigering till olika komponenter i flersidiga applikationer. Den renderar komponenter för motsvarande rutter och tilldelade webbadresser.

Vad är en React Router?

Reager Router är ett standardbibliotek för routing in Reagera . Det möjliggör navigering mellan vyer av olika komponenter i en React-applikation, gör det möjligt att ändra webbläsarens URL och håller användargränssnittet synkroniserat med URL:en. Låt oss skapa en enkel applikation för React för att förstå hur React-routern fungerar. Ansökan kommer att innehålla tre komponenter hemkomponent , den Om komponent , och den kontaktkomponent . Vi kommer att använda React Router för att navigera mellan dessa komponenter.

Steg för att använda React Router

Steg 1: Initiera ett reaktionsprojekt. Kolla detta inlägg för konfigurera React-appen

Steg 2: Installera react-router i din applikation skriv följande kommando i din terminal

datastruktur 
npm i react-router-dom>

Steg 3: Importera React Router

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

Mappstruktur:

directory_structure

De uppdaterade beroendena 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

Huvudkomponenterna i React Router är:

  • BrowserRouter : BrowserRouter är en routerimplementering som använder HTML5 History API (pushState, replaceState och popstate-händelsen) för att hålla ditt användargränssnitt synkroniserat med URL:en. Det är den överordnade komponenten som används för att lagra alla andra komponenter.
  • Rutter : Det är en ny komponent som introduceras i v6 och en uppgradering av komponenten. De främsta fördelarna med Routes over Switch är:
    • Släkting s och s
    • Rutter väljs utifrån den bästa matchningen istället för att korsas i ordning.
  • Rutt: Rutt är den villkorligt visade komponenten som återger ett användargränssnitt när dess sökväg matchar den aktuella webbadressen.
  • Länk: Länkkomponenten används för att skapa länkar till olika rutter och implementera navigering runt applikationen. Det fungerar som en HTML-ankartagg.

Implementering av React Router

Exempel: Det här exemplet visar navigering med hjälp av react-router-dom till Home, About och 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 (    
  
      
  •   Hem  
    •   
  •   Om oss  
    •   
  •   Kontakta oss  
    •   
    }>  }>  }>    
  );  } } exportera standardapp;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Välkommen till nördarnas värld!
; } export standard Hem;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com är en datavetenskapsportal för nördar!
Läs mer om oss på:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Du hittar oss här: 
techcodeview.com 
5:e och 6:e våningen, Royal Kapsons, A-118, 
Sektor-136, Noida, Uttar Pradesh (201305)
); } exportera standardkontakt;>
  
    Steg för att köra programmet:    Öppna terminalen och skriv följande kommando.
 
npm start>
    Produktion:    Öppna webbläsaren och vårt projekt visas i URL:en      http://localhost:3000/      . Nu kan du klicka på länkarna och navigera till olika komponenter. React Router håller ditt applikationsgränssnitt synkroniserat med URL:en.
  
Slutligen har vi framgångsrikt implementerat navigering i vår React-applikation med hjälp av React Router.