React 라우팅 마스터하기: 애플리케이션 탐색을 위한 완벽한 가이드

1. React Router 소개

React Router는 React 애플리케이션에서 라우팅을 처리하기 위한 라이브러리입니다. 이를 통해 앱이 전체 페이지를 다시 로드하지 않고도 다양한 구성요소와 보기 사이를 탐색할 수 있어 사용자 경험이 원활해집니다.

---

2. 기본설정

react-router-dom을 설치하여 시작하세요.

npm install react-router-dom

BrowserRouter, 경로 및 경로를 사용하여 기본 라우팅 설정:

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

const Home = () => <h2 id="Home">Home</h2>;
const About = () => <h2 id="About">About</h2>;

const App = () => {
  return (
    <router>
      <nav>
        <link to="/">Home
        <link to="/about">About
      </nav>

      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/about" element="{<About"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

3. 중첩 라우팅

더 복잡한 앱의 경우 경로를 중첩할 수 있습니다. 상위 구성 요소에 중첩 경로를 설정하는 방법은 다음과 같습니다.

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

const Dashboard = () => <h2 id="Dashboard-Home">Dashboard Home</h2>;
const Profile = () => <h2 id="Your-Profile">Your Profile</h2>;

const DashboardLayout = () => {
  return (
    <div>
      <nav>
        <link to="/dashboard">Home
        <link to="/dashboard/profile">Profile
      </nav>
      <routes>
        <route path="/" element="{<Dashboard"></route>} />
        <route path="profile" element="{<Profile"></route>} />
      </routes>
    </div>
  );
};

const App = () => {
  return (
    <router>
      <routes>
        <route path="/dashboard/*" element="{<DashboardLayout"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

4. 동적 라우팅

동적 라우팅을 사용하면 URL에 매개변수를 전달할 수 있습니다. 동적 경로를 정의하고 액세스하는 방법은 다음과 같습니다.

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

const User = () => {
  const { id } = useParams();
  return <h2 id="User-ID-id">User ID: {id}</h2>;
};

const App = () => {
  return (
    <router>
      <nav>
        <link to="/user/1">User 1
        <link to="/user/2">User 2
      </nav>

      <routes>
        <route path="/user/:id" element="{<User"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

5. 보호된 경로

보호된 경로를 구현하려면 사용자 정의 PrivateRoute 구성 요소를 생성할 수 있습니다.

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ? <outlet></outlet> : <navigate to="/login"></navigate>;
};

const App = () => {
  return (
    <router>
      <routes>
        <route path="/login" element="{<Login"></route>} />
        <route path="/dashboard" element="{<PrivateRoute"></route>}>
          <route path="" element="{<Dashboard"></route>} />
        
      </routes>
    </router>
  );
};

export default App;

---

6. 프로그래밍 방식 탐색

때때로 양식 제출 후와 같이 프로그래밍 방식으로 탐색하고 싶을 수도 있습니다. React Router v6에서 useNavigate 후크를 사용하세요.

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

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    <div>
      <h2 id="Login">Login</h2>
      <button onclick="{handleLogin}">Login</button>
    </div>
  );
};

export default Login;

---

7. 404페이지

포괄 경로를 생성하여 404(찾을 수 없음) 오류를 처리합니다.

const NotFound = () => <h2 id="Page-Not-Found">404 - Page Not Found</h2>;

const App = () => {
  return (
    <router>
      <routes>
        <route path="/" element="{<Home"></route>} />
        <route path="/about" element="{<About"></route>} />
        <route path="*" element="{<NotFound"></route>} />
      </routes>
    </router>
  );
};

export default App;

---

8. 성능 고려 사항

대규모 애플리케이션의 경우 지연 로딩 경로를 사용하면 성능이 향상될 수 있습니다. React.lazy() 및 Suspense를 사용하여 지연 로딩을 구현하는 방법은 다음과 같습니다.

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

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

const App = () => {
  return (
    <router>
      <suspense fallback="{<div">Loading...}>
        <routes>
          <route path="/" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
        </routes>
      </suspense>
    </router>
  );
};

export default App;

---

위 내용은 React 라우팅 마스터하기: 애플리케이션 탐색을 위한 완벽한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!