logo

TechCodeview

Reagovať Router

Reagovať Router , je váš nevyhnutný nástroj na vytváranie jednostránkových aplikácií (SPA). Predstavte si, že používatelia bez námahy prechádzajú medzi sekciami, zažívajú vašu webovú stránku ako plynulú aplikáciu a React Router to umožňuje, čím sa pripravuje cesta pre príjemnú používateľskú skúsenosť a modernú webovú prezentáciu. Web React by nemal znamenať, že veľká stránka sa znova načíta zakaždým, keď používatelia prejdú.

Tento článok vám pomôže viesť svet React Router a dozviete sa o koncepte React Router a jeho schopnostiach. Zostaňte naladení, aby ste odomkli potenciál plynulej navigácie a pozdvihli svoje projekty React na ďalšiu úroveň!

Obsah



urobiť while slučku v jave

Keďže v Reacte nie je zabudované smerovanie, React JS Router umožňuje podporu smerovania v Reacte a navigáciu do rôznych komponentov vo viacstránkových aplikáciách. Vykresľuje komponenty pre zodpovedajúce trasy a priradené adresy URL.

Čo je React Router?

Reagovať Router je štandardná knižnica na smerovanie Reagovať . Umožňuje navigáciu medzi zobrazeniami rôznych komponentov v aplikácii React, umožňuje zmenu adresy URL prehliadača a udržiava používateľské rozhranie synchronizované s adresou URL. Vytvorme jednoduchú aplikáciu pre React, aby sme pochopili, ako React Router funguje. Aplikácia bude obsahovať tri komponenty domáci komponent , O komponente , a kontaktný komponent . Na navigáciu medzi týmito komponentmi použijeme React Router.

Kroky na použitie React Router

Krok 1: Inicializujte projekt reakcie. Skontrolujte tento príspevok nastavenie aplikácie React

Krok 2: Nainštalujte reakčný smerovač do svojej aplikácie napíšte nasledujúci príkaz do svojho terminálu

npm i react-router-dom>

Krok 3: Import React Router

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

Štruktúra priečinka:

adresárová_štruktúra

Aktualizované závislosti v package.json súbor.

rozbaľovacia ponuka javascript 
'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 Components

Hlavné komponenty React Router sú:

  • BrowserRouter : BrowserRouter je implementácia smerovača, ktorá používa rozhranie API histórie HTML5 (pushState, replaceState a udalosť popstate), aby vaše používateľské rozhranie bolo synchronizované s adresou URL. Je to nadradený komponent, ktorý sa používa na uloženie všetkých ostatných komponentov.
  • Trasy : Je to nový komponent predstavený vo verzii 6 a upgrade komponentu. Hlavné výhody trás oproti prepínaču sú:
    • Príbuzné s a s
    • Trasy sa vyberajú na základe najlepšej zhody namiesto toho, aby sa prechádzali v poradí.
  • Trasa: Trasa je podmienene zobrazený komponent, ktorý vykreslí nejaké používateľské rozhranie, keď sa jeho cesta zhoduje s aktuálnou adresou URL.
  • odkaz: Komponent odkazu sa používa na vytváranie odkazov na rôzne trasy a implementáciu navigácie v aplikácii. Funguje ako značka kotvy HTML.

Implementácia React Router

Príklad: Tento príklad ukazuje navigáciu pomocou Reag-router-dom na komponenty Home, About a 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 nás  
    •   
  •   Kontaktuj nás  
    •   
    }>  }>  }>    
  );  } } exportovať predvolenú aplikáciu;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Vitajte vo svete Geeks!
; } exportovať predvolenú domovskú stránku;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com je počítačový portál pre geekov!
Prečítajte si viac o nás na:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Nájdete nás tu: 
techcodeview.com 
5. a 6. poschodie, Royal Kapsons, A- 118, 
Sektor- 136, Noida, Uttar Pradesh (201305)
); } exportovať predvolený kontakt;>
  
    Krok na spustenie aplikácie:    Otvorte terminál a zadajte nasledujúci príkaz.
 
npm start>
    Výkon:    Otvorte prehliadač a náš projekt sa zobrazí v adrese URL      http://localhost:3000/      . Teraz môžete kliknúť na odkazy a prejsť na rôzne komponenty. React Router udržuje používateľské rozhranie vašej aplikácie synchronizované s adresou URL.
  
Nakoniec sme úspešne implementovali navigáciu v našej aplikácii React pomocou React Router.