아키텍트 수준: React Router를 사용한 라우팅

React 애플리케이션에서 확장 가능하고 유지 관리가 가능하며 효율적인 탐색 시스템을 설계하려면 아키텍트 수준의 개발자로서 React Router를 마스터하는 것이 필수적입니다. 이 가이드에서는 Route, Switch, Link 및 NavLink와 같은 핵심 구성 요소를 활용하여 React Router를 설정하는 방법을 심층적으로 살펴보고 중첩 경로, 동적 라우팅, 경로 매개 변수, 경로 보호 및 리디렉션을 포함한 고급 라우팅 기술을 살펴봅니다.

리액트 라우터 소개

React Router는 동적 및 중첩 경로가 있는 단일 페이지 애플리케이션(SPA) 생성을 용이하게 하는 강력한 라이브러리로, 현대 웹 개발에 없어서는 안될 도구입니다.

반응 라우터 설정

시작하려면 npm 또는 Yarn을 사용하여 React Router를 설치하세요.

npm install react-router-dom

또는

yarn add react-router-dom

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

React Router는 경로 정의 및 탐색 처리를 위한 여러 가지 필수 구성요소를 제공합니다.

경로 구성 요소

Route 구성 요소는 URL 경로를 특정 구성 요소에 매핑합니다. 현재 URL을 기반으로 구성요소의 조건부 렌더링이 가능합니다.

예:

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

const App = () => (
  <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 = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);

export default App;

링크 구성요소

링크 구성요소는 애플리케이션에서 탐색 링크를 생성하는 데 사용됩니다. 기존 앵커 태그와 달리 Link 구성 요소는 전체 페이지를 다시 로드하지 않아 단일 페이지 애플리케이션 환경을 유지합니다.

예:

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

const App = () => (
  <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 = () => (
  <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;

동적 라우팅

사용자 ID나 제품 ID와 같은 동적 매개변수를 기반으로 경로를 생성하려면 동적 라우팅이 필수적입니다. 유연하고 확장 가능한 애플리케이션 아키텍처가 가능합니다.

예:

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 애플리케이션에서 강력하고 확장 가능한 탐색 시스템을 설계하려면 React Router를 마스터하는 것이 필수적입니다. 경로 설정 방법을 이해하고 Route, Switch, Link 및 NavLink와 같은 핵심 구성 요소를 사용하고 중첩 경로, 동적 라우팅, 경로 매개 변수 및 경로 가드와 같은 고급 기술을 구현하면 정교한 단일 페이지 애플리케이션을 만들 수 있습니다. 아키텍트 수준의 개발자로서 확장 가능한 라우팅 아키텍처를 설계하는 능력은 애플리케이션의 유지 관리성과 효율성을 크게 향상시켜 팀을 성공적인 프로젝트 구현으로 이끌 것입니다.

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