고급 수준: React Router를 사용한 라우팅

고급 개발자로서 React 애플리케이션의 라우팅을 포괄적으로 이해하는 것이 중요합니다. React Router는 URL 경로를 기반으로 구성 요소의 탐색 및 렌더링을 관리하기 위한 강력한 솔루션을 제공합니다. 이 가이드에서는 React Router의 설정, 필수 구성요소 및 중첩 경로, 동적 라우팅, 경로 매개변수 및 경로 가드와 같은 고급 기술을 다룹니다.

리액트 라우터 소개

React Router는 React 애플리케이션에서 클라이언트측 라우팅을 처리하기 위한 강력한 라이브러리입니다. URL 경로를 기반으로 동적 라우팅, 중첩 경로 및 조건부 렌더링이 가능합니다.

반응 라우터 설정

먼저 npm 또는 Yarn을 사용하여 React Router를 설치합니다.

npm install react-router-dom

또는

yarn add react-router-dom

라우팅, 스위치, 링크 및 NavLink 구성요소

React Router는 경로를 정의하고 탐색을 처리하는 여러 구성요소를 제공합니다.

경로 구성 요소

경로 구성 요소는 경로를 정의하고 이를 구성 요소와 연결하는 데 사용됩니다.

예:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

스위치 구성요소

Switch 구성요소는 적합한 첫 번째 경로와 일치하여 한 번에 하나의 경로만 렌더링되도록 합니다.

예:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};

export default App;

링크 구성요소

링크 구성 요소는 탐색 링크를 생성하여 전체 페이지를 다시 로드하는 것을 방지하고 단일 페이지 애플리케이션 환경을 유지합니다.

예:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

NavLink 구성 요소

NavLink 구성 요소는 Link와 유사하지만 활성 경로에 따라 스타일을 지정할 수 있습니다.

예:

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import Home from './Home';
import About from './About';

const App = () => {
  return (
    <Router>
      <nav>
        <NavLink exact to="/" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="active">
          About
        </NavLink>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

고급 라우팅 기술

중첩된 경로

중첩 경로를 사용하면 다른 경로 내에 경로를 생성할 수 있으며 이는 하위 탐색이 포함된 복잡한 레이아웃에 유용합니다.

예:

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

const Topic = ({ match }) => <h3>Requested Topic ID: {match.params.topicId}</h3>;

const Topics = () => {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`} component={Topic} />
      </Switch>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/">
          <h2>Home</h2>
        </Route>
        <Route path="/topics" component={Topics} />
      </Switch>
    </div>
  </Router>
);

export default App;

동적 라우팅

동적 라우팅을 사용하면 동적 매개변수를 기반으로 경로를 생성할 수 있어 사용자 프로필이나 제품 세부정보에 유용합니다.

예:

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

const User = ({ match }) => <h3>User ID: {match.params.userId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/user/1">User 1</Link>
        </li>
        <li>
          <Link to="/user/2">User 2</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/user/:userId" component={User} />
      </Switch>
    </div>
  </Router>
);

export default App;

경로 매개변수

경로 매개변수를 사용하면 URL에서 값을 캡처하여 구성요소에 사용할 수 있습니다.

예:

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

const Product = ({ match }) => <h3>Product ID: {match.params.productId}</h3>;

const App = () => (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/product/101">Product 101</Link>
        </li>
        <li>
          <Link to="/product/202">Product 202</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/product/:productId" component={Product} />
      </Switch>
    </div>
  </Router>
);

export default App;

경로 보호 및 리디렉션

경로 보호

루트 가드는 사용자 인증 등의 조건에 따라 특정 경로에 대한 접근을 제한합니다.

예:

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

const isAuthenticated = false;

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
    }
  />
);

const Dashboard = () => <h3>Dashboard</h3>;
const Login = () => <h3>Login</h3>;

const App = () => (
  <Router>
    <div>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </div>
  </Router>
);

export default App;

React Router에서 리디렉션 구현하기

리디렉션을 사용하면 프로그래밍 방식으로 사용자를 다양한 경로로 이동할 수 있습니다.

예:

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

const OldPage = () => <h3>Old Page (will redirect)</h3>;
const NewPage = () => <h3>New Page</h3>;

const App = () => (
  <Router>
    <Switch>
      <Route path="/old-page">
        <Redirect to="/new-page" />
      </Route>
      <Route path="/new-page" component={NewPage} />
    </Switch>
  </Router>
);

export default App;

이 예에서 /old-page를 방문하면 자동으로 사용자가 /new-page로 리디렉션됩니다.

결론

React Router로 라우팅을 마스터하는 것은 정교하고 사용자 친화적인 React 애플리케이션을 구축하는 데 필수적입니다. 경로를 설정하고, 핵심 구성 요소를 사용하고, 중첩 경로, 동적 라우팅, 경로 매개 변수 및 경로 가드와 같은 고급 기술을 구현하는 방법을 이해하면 강력한 탐색 시스템을 만들 수 있습니다. 선임 개발자로서 이러한 기술은 React 프로젝트에서 확장 가능한 라우팅 아키텍처를 설계 및 구현하여 원활한 사용자 경험과 유지 관리 가능한 코드베이스를 보장하는 데 도움이 됩니다.

위 내용은 고급 수준: React Router를 사용한 라우팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!