logo

TechCodeview

Reagovat Router

Reagovat Router , je váš základní nástroj pro vytváření jednostránkových aplikací (SPA). Představte si, že uživatelé bez námahy přecházejí mezi sekcemi, prožívají váš web jako plynulou aplikaci a React Router to umožňuje, dláždí cestu pro příjemný uživatelský zážitek a moderní webovou prezentaci. Web React by neměl znamenat, že se velká stránka znovu načte pokaždé, když uživatel projde.

Tento článek vám pomůže projít světem React Router a dozvíte se o konceptu React Router a jeho schopnostech. Zůstaňte naladěni, abyste odemkli potenciál hladké navigace a pozvedli své projekty React na další úroveň!

Obsah



Protože v Reactu není žádné vestavěné směrování, React JS Router umožňuje podporu směrování v Reactu a navigaci do různých komponent ve vícestránkových aplikacích. Vykresluje komponenty pro odpovídající trasy a přiřazené adresy URL.

tisknout vzor hvězdy

Co je React Router?

Reagovat Router je standardní knihovna pro směrování do Reagovat . Umožňuje navigaci mezi pohledy různých komponent v aplikaci React, umožňuje změnu adresy URL prohlížeče a udržuje uživatelské rozhraní synchronizované s adresou URL. Pojďme vytvořit jednoduchou aplikaci pro React, abychom pochopili, jak React Router funguje. Aplikace bude obsahovat tři součásti domácí komponenta , O komponentě a kontaktní součást . K navigaci mezi těmito komponentami použijeme React Router.

Kroky k použití React Router

Krok 1: Inicializujte projekt reakce. Zkontrolujte tento příspěvek nastavení aplikace React

Krok 2: Nainstalujte si do své aplikace Reag-router napište do svého terminálu následující příkaz

npm i react-router-dom>

Krok 3: Import React Router

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

Struktura složky:

adresářová_struktura

Aktualizované závislosti v package.json soubor.

'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í součásti React Routeru jsou:

  • BrowserRouter : BrowserRouter je implementace směrovače, která používá rozhraní API historie HTML5 (pushState, replaceState a událost popstate), aby vaše uživatelské rozhraní bylo synchronizované s adresou URL. Je to nadřazená komponenta, která se používá k uložení všech ostatních komponent.
  • Trasy : Je to nová komponenta představená ve verzi v6 a upgrade komponenty. Hlavní výhody Routes oproti Switch jsou:
    • Relativní s a s
    • Trasy jsou vybírány na základě nejlepší shody namísto toho, aby byly procházeny v pořadí.
  • Trasa: Route je podmíněně zobrazená komponenta, která vykreslí nějaké uživatelské rozhraní, když jeho cesta odpovídá aktuální adrese URL.
  • Odkaz: Komponenta odkazu se používá k vytváření odkazů na různé trasy a implementaci navigace v aplikaci. Funguje jako značka kotvy HTML.

Implementace React Router

Příklad: Tento příklad ukazuje navigaci pomocí respond-router-dom ke komponentám 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  
    •   
  •   Kontaktujte nás  
    •   
    }>  }>  }>    
  );  } } exportovat výchozí aplikaci;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Vítejte ve světě Geeks!
; } exportovat výchozí domovskou stránku;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com je počítačový vědecký portál pro geeky!
Přečtěte si o nás více na:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Najdete nás zde: 
techcodeview.com 
5. a 6. patro, Royal Kapsons, A- 118, 
Sektor- 136, Noida, Uttar Pradesh (201305)
); } exportovat výchozí kontakt;>
  
    Krok ke spuštění aplikace:    Otevřete terminál a zadejte následující příkaz.
 
npm start>
    Výstup:    Otevřete prohlížeč a náš projekt se zobrazí v URL      http://localhost:3000/      . Nyní můžete kliknout na odkazy a přejít na různé komponenty. React Router udržuje uživatelské rozhraní vaší aplikace synchronizované s adresou URL.
  
Nakonec jsme úspěšně implementovali navigaci v naší aplikaci React pomocí React Router.