logo

TechCodeview

Reaguj routerem

Reaguj routerem , to podstawowe narzędzie do tworzenia aplikacji jednostronicowych (SPA). Wyobraź sobie, że użytkownicy bez wysiłku przechodzą między sekcjami, korzystając z Twojej witryny internetowej jak płynnej aplikacji, a React Router to umożliwia, torując drogę do wspaniałego doświadczenia użytkownika i nowoczesnej obecności w sieci. Witryna React nie powinna oznaczać, że duża strona ładuje się ponownie za każdym razem, gdy użytkownik na nią wchodzi.

Ten artykuł pomoże Ci wprowadzić się w świat React Router i poznasz koncepcję React Router oraz jego możliwości. Bądź na bieżąco, aby uwolnić potencjał płynnej nawigacji i przenieść swoje projekty React na wyższy poziom!

Spis treści



kolejka priorytetowa

Ponieważ w React nie ma wbudowanego routingu, React JS Router umożliwia obsługę routingu w React i nawigację do różnych komponentów w aplikacjach wielostronicowych. Renderuje komponenty dla odpowiednich tras i przypisanych adresów URL.

Co to jest router reagujący?

Reaguj routerem to standardowa biblioteka do routingu Reagować . Umożliwia nawigację pomiędzy widokami różnych komponentów aplikacji React, umożliwia zmianę adresu URL przeglądarki i synchronizuje interfejs użytkownika z adresem URL. Stwórzmy prostą aplikację do React, aby zrozumieć, jak działa React Router. Aplikacja będzie zawierać trzy komponenty: element domu , O komponencie , oraz element kontaktowy . Do nawigacji pomiędzy tymi komponentami użyjemy React Router.

Kroki korzystania z routera React

Krok 1: Zainicjuj projekt reagujący. Sprawdź ten post konfigurowanie aplikacji React

Krok 2: Zainstaluj router Reaguj w swojej aplikacji, wpisz następujące polecenie w swoim terminalu

npm i react-router-dom>

Krok 3: Importowanie routera React

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

Struktura folderów:

struktura_katalogu

Zaktualizowane zależności w pakiet.json plik.

25 ze 100 
'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' },>

Reaguj na komponenty routera

Główne komponenty React Router to:

  • PrzeglądarkaRouter : BrowserRouter to implementacja routera korzystająca z interfejsu API historii HTML5 (pushState, zamieńState i zdarzenie popstate), aby zapewnić synchronizację interfejsu użytkownika z adresem URL. Jest to komponent nadrzędny, w którym przechowywane są wszystkie pozostałe komponenty.
  • Trasy : Jest to nowy komponent wprowadzony w wersji 6 i ulepszona wersja komponentu. Główne zalety Routes over Switch to:
    • Względne si i s
    • Trasy są wybierane na podstawie najlepszego dopasowania, a nie pokonywane w kolejności.
  • Trasa: Route to warunkowo pokazywany komponent, który renderuje interfejs użytkownika, gdy jego ścieżka pasuje do bieżącego adresu URL.
  • Połączyć: Komponent link służy do tworzenia łączy do różnych tras i implementowania nawigacji po aplikacji. Działa jak znacznik kotwicy HTML.

Implementacja routera React

Przykład: Ten przykład pokazuje nawigację przy użyciu React-router-dom do komponentów Home, About i 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 (    
  
      
  •   Dom  
    •   
  •   O nas  
    •   
  •   Skontaktuj się z nami  
    •   
    }>  }>  }>    
  );  } } eksportuj domyślną aplikację;>
JavaScript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Witamy w świecie Geeków!
; } eksportuj domyślną stronę główną;>
JavaScript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com to portal informatyczny dla maniaków!
Więcej o nas przeczytasz na:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Znajdziesz nas tutaj: 
techcodeview.com 
5. i 6. piętro, Royal Kapsons, A-118, 
Sektor-136, Noida, Uttar Pradesh (201305)
); } eksportuj domyślny kontakt;>
  
    Krok, aby uruchomić aplikację:    Otwórz terminal i wpisz następujące polecenie.
 
npm start>
    Wyjście:    Otwórz przeglądarkę, a nasz projekt wyświetli się w adresie URL      http://localhost:3000/      . Teraz możesz kliknąć łącza i przejść do różnych komponentów. React Router synchronizuje interfejs aplikacji z adresem URL.
  
Wreszcie pomyślnie zaimplementowaliśmy nawigację w naszej aplikacji React przy użyciu React Router.