중간 수준: React Router를 사용한 라우팅

라우팅은 최신 웹 애플리케이션을 구축하는 데 있어 중요한 측면입니다. React Router는 개발자가 React 애플리케이션에서 클라이언트 측 라우팅을 효율적으로 처리할 수 있게 해주는 강력한 라이브러리입니다. 이 가이드에서는 React Router 설정의 기본 사항, 필수 구성요소 사용 방법, 중첩 경로, 동적 라우팅, 경로 매개변수, 경로 가드와 같은 고급 라우팅 기술을 살펴보겠습니다.

리액트 라우터 소개

React Router를 사용하면 URL을 기반으로 다양한 구성 요소의 탐색 및 렌더링을 관리할 수 있습니다. 원활한 탐색 환경을 통해 단일 페이지 애플리케이션(SPA)을 구축하는 데 도움이 됩니다.

반응 라우터 설정

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

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;

이 예에서는 경로가 /일 때 Home 구성 요소가 렌더링되고, 경로가 /about일 때 About 구성 요소가 렌더링됩니다.

스위치 구성요소

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;

이 예에서는 일치하는 경로가 없으면 NotFound 구성 요소가 렌더링됩니다.

링크 구성요소

링크 구성 요소는 앵커() 태그와 유사하지만 페이지를 다시 로드하지 않고 애플리케이션에 탐색 링크를 생성합니다.

예:

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;

이 예에서 activeClassName prop은 현재 경로와 일치하는 링크에 활성 클래스를 적용합니다.

고급 라우팅 기술

중첩된 경로

중첩 경로를 사용하면 다른 경로 내에 경로를 생성하여 계층적 탐색 구조를 구현할 수 있습니다.

예:

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;

이 예에서 사용자 구성요소는 경로 매개변수로 전달된 사용자 ID로 렌더링됩니다.

경로 매개변수

경로 매개변수를 사용하면 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;

이 예에서 Product 구성 요소는 productId 경로 매개변수를 사용하여 제품 ID를 표시합니다.

경로 보호 및 리디렉션

경로 보호 및 리디렉션은 사용자 인증과 같은 조건에 따라 특정 경로에 대한 액세스를 제어하는 ​​데 도움이 됩니다.

경로 보호

경로를 보호하기 위해 구성 요소를 렌더링하기 전에 조건(예: 사용자 인증)을 확인하는 HOC(고차 구성 요소)를 생성할 수 있습니다.

예:

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;

이 예에서 PrivateRoute 구성 요소는 대시보드 구성 요소를 렌더링하기 전에 사용자가 인증되었는지 확인합니다. 사용자가 인증되지 않으면 로그인 구성 요소로 리디렉션됩니다.

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를 사용한 라우팅을 이해하고 구현하는 것이 필수적입니다. 경로 설정, Link 및 NavLink를 사용한 탐색 처리, 중첩 경로, 동적 라우팅, 경로 매개변수 및 경로 가드와 같은 고급 기술 구현의 기본 사항을 숙지하면 애플리케이션에서 원활하고 안전한 탐색 환경을 만들 수 있습니다. 이러한 개념은 기술을 계속 발전시키면서 React를 사용하여 정교한 단일 페이지 애플리케이션을 구축하는 능력의 기초를 형성할 것입니다.

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