React Router , on tärkeä työkalusi yksisivuisten sovellusten luomiseen. Kuvittele, että käyttäjät siirtyvät vaivattomasti osioiden välillä, kokevat verkkosivustosi sujuvan sovelluksen tavoin ja React Router tekee sen mahdolliseksi, mikä tasoittaa tietä ihastuttavalle käyttökokemukselle ja nykyaikaiselle verkkonäkyvyydelle. React-sivuston ei pitäisi tarkoittaa, että suuri sivu latautuu uudelleen aina, kun käyttäjät navigoivat.

kuinka muuttaa merkkijono int

Tämä artikkeli auttaa sinua opastamaan React Routerin maailmaan ja opit React Router -konseptista ja sen ominaisuuksista. Pysy kuulolla, jotta voit hyödyntää sujuvan navigoinnin mahdollisuudet ja nostaa React-projektisi uudelle tasolle!

Sisällysluettelo

• Mikä on React-reititin?
• React-reitittimen käytön vaiheet
• React Router Components
• React Routerin käyttöönotto

Koska Reactissa ei ole sisäänrakennettua reititystä, React JS Router mahdollistaa reititystuen Reactissa ja navigoinnin eri komponentteihin monisivuisissa sovelluksissa. Se hahmontaa komponentteja vastaaville reiteille ja osoitetuille URL-osoitteille.

Mikä on React-reititin?

React Router on vakiokirjasto reititystä varten Reagoi . Se mahdollistaa navigoinnin React-sovelluksen eri komponenttien näkymien välillä, mahdollistaa selaimen URL-osoitteen muuttamisen ja pitää käyttöliittymän synkronoituna URL-osoitteen kanssa. Luokaamme yksinkertainen sovellus Reactille ymmärtääksemme, kuinka React Router toimii. Sovellus sisältää kolme osaa kodin komponentti , Tietoja komponentista , ja kosketuskomponentti . Käytämme React Routeria navigoidaksemme näiden komponenttien välillä.

React-reitittimen käytön vaiheet

Vaihe 1: Aloita reagointiprojekti. Tarkista tämä viesti React-sovelluksen käyttöönotto

Vaihe 2: Asenna react-router sovellukseesi kirjoita seuraava komento päätteeseen

npm i react-router-dom>

Vaihe 3: Tuodaan React-reititintä

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

Kansiorakenne:

muuntaa merkkijono json-objektiksi

Päivitetyt riippuvuudet sisään package.json tiedosto.

'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

React Routerin pääkomponentit ovat:

• BrowserRouter : BrowserRouter on reitittimen toteutus, joka käyttää HTML5-historiasovellusliittymää (pushState, changeState ja popstate-tapahtuma) pitääkseen käyttöliittymäsi synkronoituna URL-osoitteen kanssa. Se on pääkomponentti, jota käytetään kaikkien muiden komponenttien tallentamiseen.
• Reitit : Se on v6:ssa esitelty uusi komponentti ja komponentin päivitys. Routesin tärkeimmät edut Switchiin verrattuna ovat:
  • Sukulaiset s ja s
  • Reitit valitaan parhaan osuman perusteella sen sijaan, että ne kuljettaisiin järjestyksessä.
• Reitti: Reitti on ehdollisesti näytettävä komponentti, joka hahmontaa jonkin käyttöliittymän, kun sen polku vastaa nykyistä URL-osoitetta.
• Linkki: Linkkikomponentilla luodaan linkkejä eri reiteille ja toteutetaan navigointi sovelluksen ympärillä. Se toimii kuin HTML-ankkuritunniste.

React Routerin käyttöönotto

Esimerkki: Tämä esimerkki näyttää navigoinnin react-router-dom-toiminnolla Home-, About- ja Contact Components -osoitteisiin.

// 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 (    
  
  
  Koti  
  
  Meistä  
  
  Ota meihin yhteyttä  
  
    }>  }>  }>    
  );  } } vie oletussovellus;>>JavascriptTervetuloa Geeksin maailmaan!; } vie oletuskotisivu;>>Javascript  
techcodeview.com on tietojenkäsittelytieteen portaali nörteille!
Lue lisää meistä osoitteessa: Löydät meidät täältä: 
techcodeview.com 
5th & 6th Floor, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305)); } vie oletusyhteystieto;>> 
    Vaihe sovelluksen suorittamiseksi:    Avaa pääte ja kirjoita seuraava komento.
     Lähtö:    Avaa selain ja projektimme näkyy URL-osoitteessa      http://localhost:3000/      . Nyt voit napsauttaa linkkejä ja siirtyä eri osiin. React Router pitää sovelluksesi käyttöliittymän synkronoituna URL-osoitteen kanssa.
  
Lopuksi olemme onnistuneesti ottaneet käyttöön navigoinnin React-sovelluksessamme React Routerin avulla.