logo

TechCodeview

반응 라우터

반응 라우터 는 단일 페이지 애플리케이션(SPA)을 구축하는 데 필수적인 도구입니다. 사용자가 섹션 간을 쉽게 전환하고 웹 사이트를 유동적인 앱처럼 경험하고 React Router를 통해 이를 가능하게 하며 즐거운 사용자 경험과 현대적인 웹 존재를 위한 길을 닦는다고 상상해 보십시오. React 웹사이트는 사용자가 탐색할 때마다 큰 페이지가 다시 로드된다는 것을 의미해서는 안 됩니다.

이 기사는 React Router의 세계를 안내하는 데 도움이 되며 React Router 개념과 그 기능에 대해 배우게 됩니다. 원활한 탐색의 잠재력을 발휘하고 React 프로젝트를 다음 단계로 끌어올릴 수 있도록 계속 지켜봐 주시기 바랍니다!

내용의 테이블



React에는 내장된 라우팅이 없으므로 React JS Router를 사용하면 React에서 라우팅을 지원하고 다중 페이지 애플리케이션의 다양한 구성 요소를 탐색할 수 있습니다. 해당 경로 및 할당된 URL에 대한 구성 요소를 렌더링합니다.

리액트 라우터란 무엇인가요?

반응 라우터 라우팅을 위한 표준 라이브러리입니다. 반응하다 . React 애플리케이션의 다양한 구성요소 보기 간 탐색을 가능하게 하고, 브라우저 URL을 변경하고, UI를 URL과 동기화된 상태로 유지합니다. React Router의 작동 방식을 이해하기 위해 간단한 React 애플리케이션을 만들어 보겠습니다. 응용 프로그램에는 세 가지 구성 요소가 포함됩니다. 홈 구성 요소 , 구성 요소 정보 , 그리고 접촉 구성요소 . 우리는 React Router를 사용하여 이러한 구성요소 사이를 탐색할 것입니다.

React Router를 사용하는 단계

1 단계: 반응 프로젝트를 초기화합니다. 이 게시물을 확인하세요 React 앱 설정

2 단계: 애플리케이션에 반응 라우터를 설치하고 터미널에 다음 명령을 작성하세요.

npm i react-router-dom>

단계 3: React Router 가져오기

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

폴더 구조:

디렉토리_구조

업데이트된 종속성 패키지.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 Router의 주요 구성 요소는 다음과 같습니다.

  • 브라우저라우터 : BrowserRouter는 HTML5 기록 API(pushState, replacementState 및 popstate 이벤트)를 사용하여 UI와 URL의 동기화를 유지하는 라우터 구현입니다. 다른 모든 구성 요소를 저장하는 데 사용되는 상위 구성 요소입니다.
  • 노선 : v6에 새롭게 추가된 컴포넌트이자 컴포넌트의 업그레이드입니다. 스위치를 통한 경로의 주요 장점은 다음과 같습니다.
    • 상대 s 및 s
    • 경로는 순서대로 이동하는 대신 가장 일치하는 항목을 기준으로 선택됩니다.
  • 노선: Route는 해당 경로가 현재 URL과 일치할 때 일부 UI를 렌더링하는 조건부로 표시되는 구성 요소입니다.
  • 링크: 링크 구성 요소는 다양한 경로에 대한 링크를 만들고 애플리케이션 주변의 탐색을 구현하는 데 사용됩니다. 이는 HTML 앵커 태그처럼 작동합니다.

React Router 구현

예: 이 예에서는 홈, 정보 및 연락처 구성 요소에 대한 반응 라우터 돔을 사용한 탐색을 보여줍니다.

자바스크립트 
// 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 (    
  
      
  •   집  
    •   
  •   회사 소개  
    •   
  •   문의하기  
    •   
    }>  }>  }>    
  );  } } 기본 앱 내보내기;>
자바스크립트 
// Filename - component/home.js import React from 'react'; function Home() {  return 
괴짜의 세계에 오신 것을 환영합니다!
; } 기본 홈 내보내기;>
자바스크립트 
// 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, 
섹터- 136, 노이다, 우타르프라데시(201305)
); } 기본 연락처 내보내기;>
  
    애플리케이션 실행 단계:    터미널을 열고 다음 명령을 입력하십시오.
 
npm start>
    산출:    브라우저를 열면 프로젝트가 URL에 표시됩니다.      http://localhost:3000/      . 이제 링크를 클릭하여 다른 구성 요소로 이동할 수 있습니다. React Router는 애플리케이션 UI를 URL과 동기화된 상태로 유지합니다.
  
마지막으로 React Router를 사용하여 React 애플리케이션에서 탐색을 성공적으로 구현했습니다.