logo

TechCodeview

Маршрутизатор React

Маршрутизатор React , це ваш важливий інструмент для створення односторінкових програм (SPA). Уявіть, що користувачі легко переходять між розділами, відчуваючи ваш веб-сайт як плавну програму, і React Router робить це можливим, прокладаючи шлях до чудової взаємодії з користувачем і сучасної веб-присутності. Веб-сайт React не повинен означати, що велика сторінка перезавантажується щоразу, коли користувачі переходять.

актриса кіно реха

Ця стаття допоможе вам зорієнтуватися у світі React Router і ви дізнаєтесь про концепцію React Router та його можливості. Залишайтеся з нами, щоб розкрити потенціал плавної навігації та підняти свої проекти React на наступний рівень!

Зміст



Оскільки в React немає вбудованої маршрутизації, React JS Router забезпечує підтримку маршрутизації в React і навігацію до різних компонентів у багатосторінкових програмах. Він відображає компоненти для відповідних маршрутів і призначених URL-адрес.

Що таке маршрутизатор React?

Маршрутизатор React є стандартною бібліотекою для маршрутизації Реагувати . Він забезпечує навігацію між представленнями різних компонентів у додатку React, дозволяє змінювати URL-адресу браузера та підтримує синхронізацію інтерфейсу користувача з URL-адресою. Давайте створимо просту програму для React, щоб зрозуміти, як працює React Router. Додаток буде містити три компоненти домашній компонент , Про компонент , і контактний компонент . Ми будемо використовувати React Router для навігації між цими компонентами.

mergesort java

Кроки для використання React Router

Крок 1: Ініціалізація проекту React. Перевірте цю публікацію налаштування програми React

Крок 2: Встановіть react-router у вашій програмі, напишіть наступну команду у своєму терміналі

npm i react-router-dom>

Крок 3: Імпорт маршрутизатора React

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

Структура папки:

структура_каталогу

Оновлені залежності в package.json файл.

'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

Основними компонентами React Router є:

document.queryselector
  • BrowserRouter : BrowserRouter — це реалізація маршрутизатора, яка використовує API історії HTML5 (pushState, replaceState та подію popstate), щоб підтримувати синхронізацію вашого інтерфейсу користувача з URL-адресою. Це батьківський компонент, який використовується для зберігання всіх інших компонентів.
  • Маршрути : це новий компонент, представлений у v6 та оновлений компонент. Основні переваги Routes над Switch:
    • Відносні с і с
    • Маршрути вибираються на основі найкращого збігу, а не по порядку.
  • Маршрут: Маршрут — це умовно показаний компонент, який відображає деякий інтерфейс користувача, якщо його шлях збігається з поточною URL-адресою.
  • Посилання: Компонент посилання використовується для створення посилань на різні маршрути та реалізації навігації навколо програми. Він працює як тег прив’язки HTML.

Впровадження React Router

приклад: У цьому прикладі показано навігацію за допомогою react-router-dom до компонентів Home, About і 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 (    
  
      
  •   додому  
    •   
  •   Про нас  
    •   
  •   Зв'яжіться з нами  
    •   
    }>  }>  }>    
  );  } } експорт програми за замовчуванням;>
Javascript 
// Filename - component/home.js import React from 'react'; function Home() {  return 
Ласкаво просимо у світ гіків!
; } експорт за замовчуванням Home;>
Javascript 
// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com — це портал інформатики для фанатів!
Дізнайтеся більше про нас на:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Ви можете знайти нас тут: 
techcodeview.com 
5-й і 6-й поверхи, Royal Kapsons, A- 118, 
Sector- 136, Noida, Uttar Pradesh (201305)
); } експорт контакту за замовчуванням;>
  
    Крок запуску програми:    Відкрийте термінал і введіть таку команду.
 
npm start>
    Вихід:    Відкрийте браузер, і наш проект буде показано в URL-адресі      http://localhost:3000/      . Тепер ви можете натискати на посилання та переходити до різних компонентів. React Router підтримує синхронізацію інтерфейсу користувача програми з URL-адресою.
увімкніть java

  
Нарешті, ми успішно реалізували навігацію в нашій програмі React за допомогою React Router.