logo

TechCodeview

Reageer router

Reageer router , is uw essentiële hulpmiddel voor het bouwen van applicaties met één pagina (SPA's). Stel je voor dat gebruikers moeiteloos tussen secties kunnen overstappen en je website als een vloeiende app ervaren, en React Router maakt het mogelijk, waardoor de weg wordt vrijgemaakt voor een heerlijke gebruikerservaring en een moderne aanwezigheid op het internet. Een React-website hoeft niet te betekenen dat een grote pagina opnieuw wordt geladen telkens wanneer gebruikers navigeren.

Dit artikel helpt u bij het verkennen van de wereld van React Router en u leert over het React Router-concept en de mogelijkheden ervan. Blijf op de hoogte om het potentieel van soepele navigatie te ontsluiten en uw React-projecten naar een hoger niveau te tillen!

Inhoudsopgave



pvr volledige vorm

Omdat er geen ingebouwde routering is in React, maakt de React JS Router routeringsondersteuning in React en navigatie naar verschillende componenten in toepassingen met meerdere pagina's mogelijk. Het geeft componenten weer voor overeenkomstige routes en toegewezen URL's.

Wat is een React-router?

Reageer router is een standaardbibliotheek voor routering Reageer . Het maakt de navigatie mogelijk tussen weergaven van verschillende componenten in een React-applicatie, maakt het mogelijk de browser-URL te wijzigen en houdt de gebruikersinterface gesynchroniseerd met de URL. Laten we een eenvoudige applicatie voor React maken om te begrijpen hoe de React Router werkt. De applicatie zal drie componenten bevatten: woningcomponent , de Over onderdeel , en de contactcomponent . We zullen React Router gebruiken om tussen deze componenten te navigeren.

Stappen om React Router te gebruiken

Stap 1: Initialiseer een reactieproject. Controleer dit bericht React-app instellen

Stap 2: Installeer react-router in uw applicatie en schrijf de volgende opdracht in uw terminal

npm i react-router-dom>

Stap 3: React Router importeren

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

Mappenstructuur:

mapstructuur

De bijgewerkte afhankelijkheden in pakket.json bestand.

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

Reageer routercomponenten

De belangrijkste componenten van React Router zijn:

  • BrowserRouter : BrowserRouter is een routerimplementatie die de HTML5-geschiedenis-API (pushState, ReplaceState en de popstate-gebeurtenis) gebruikt om uw gebruikersinterface gesynchroniseerd te houden met de URL. Het is de bovenliggende component die wordt gebruikt om alle andere componenten op te slaan.
  • Routes : Het is een nieuw onderdeel geïntroduceerd in v6 en een upgrade van het onderdeel. De belangrijkste voordelen van Routes over Switch zijn:
    • Relatieve s en s
    • Routes worden gekozen op basis van de beste match, in plaats van dat ze op volgorde worden afgelegd.
  • Route: Route is de voorwaardelijk weergegeven component die een gebruikersinterface weergeeft wanneer het pad overeenkomt met de huidige URL.
  • Koppeling: De linkcomponent wordt gebruikt om links naar verschillende routes te maken en navigatie door de applicatie te implementeren. Het werkt als een HTML-ankertag.

Implementatie van React Router

Voorbeeld: Dit voorbeeld toont navigatie met behulp van react-router-dom naar de componenten Home, About en 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 (    
  
      
  •   Thuis  
    •   
  •   Over ons  
    •   
  •   Neem contact met ons op  
    •   
    }>  }>  }>    
  );  } } standaardapp exporteren;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Welkom in de wereld van Geeks!
; } export standaard Thuis;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com is een computerwetenschappelijk portaal voor nerds!
Lees meer over ons op:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
U kunt ons hier vinden: 
techcodeview.com 
5e en 6e verdieping, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305)
); } export standaard Contactpersoon;>
  
    Stap om de applicatie uit te voeren:    Open de terminal en typ de volgende opdracht.
 
npm start>
    Uitgang:    Open de browser en ons project wordt weergegeven in de URL      http://localhost:3000/      . Nu kunt u op de links klikken en naar verschillende componenten navigeren. React Router houdt de gebruikersinterface van uw applicatie gesynchroniseerd met de URL.
  
Ten slotte hebben we met succes navigatie in onze React-applicatie geïmplementeerd met behulp van React Router.