React Router 이해: 초보자를 위한 단계별 가이드

#React Router는 React 애플리케이션에서 탐색을 처리하는 데 가장 널리 사용되는 라이브러리 중 하나입니다. 이를 통해 개발자는 동적 라우팅을 통해 단일 페이지 애플리케이션(SPA)을 구축하여 원활하고 응답성이 뛰어난 사용자 환경을 만들 수 있습니다. 이 가이드에서는 React Router의 기본 사항과 이를 사용하여 React 앱에서 탐색 기능을 구축하는 방법을 살펴보겠습니다.

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

React Router는 React 애플리케이션에서 탐색 및 라우팅을 관리할 수 있는 라이브러리입니다

React Router를 사용하는 이유는 무엇입니까?

1. 동적 탐색:

페이지를 다시 로드하지 않고도 보기 간 원활한 전환이 가능합니다.

2. 선언적 라우팅:

경로는 JSX를 사용하여 정의되므로 읽고 관리하기 쉽습니다.

3. 중첩 경로:

복잡한 라우팅 계층을 허용합니다.

4. URL 매개변수를 지원합니다:

URL을 기반으로 동적 콘텐츠 렌더링을 활성화합니다.

React Router 시작하기

설치

React Router를 사용하려면 npm 또는 Yarn을 통해 라이브러리를 설치하세요.
npm 설치 반응 라우터-dom
아니면
원사 반응 라우터 돔 추가

기본 설정

간단한 React 애플리케이션에서 React Router를 설정하는 방법은 다음과 같습니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

• BrowserRouter : 애플리케이션을 래핑하고 라우팅 기능을 제공합니다.
• 경로 : 여러 경로를 정의하는 컨테이너입니다.
• 경로 : 경로 및 관련 구성요소를 정의합니다

React Router의 주요 기능

1. 동적 경로

React Router는 URL 매개변수를 사용하여 동적 경로를 지원합니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams(); // Access the dynamic URL parameter
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 내비게이션 링크

대신 Link 또는 NavLink 구성요소를 사용하세요. 더 나은 성능을 위한 태그.

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

• 링크 : 전체 페이지 새로고침을 방지하여 탐색 속도를 높입니다.
• NavLink : 현재 활성화된 경로에 대한 활성 스타일을 제공합니다.

3. 지연 로딩

지연 로딩 구성 요소로 성능을 최적화합니다.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

결론

React Router는 경로를 관리하는 선언적이고 동적인 방법을 제공하여 React 애플리케이션의 탐색을 단순화합니다. 간단한 SPA를 구축하든 복잡한 중첩 애플리케이션을 구축하든 React Router를 마스터하면 개발 기술이 크게 향상됩니다.

위 내용은 React Router 이해: 초보자를 위한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!