인턴 수준: React Router를 사용한 라우팅

라우팅은 최신 웹 애플리케이션을 구축하는 데 있어 중요한 측면입니다. React Router는 React 애플리케이션에서 라우팅을 처리할 수 있는 강력한 라이브러리입니다. 이 가이드에서는 기본 설정 및 사용법은 물론 고급 라우팅 기술 및 경로 보호를 다루는 React Router를 소개합니다.

리액트 라우터 소개

React Router를 사용하면 React 애플리케이션의 다양한 구성 요소 간 탐색이 가능하므로 여러 보기가 있는 단일 페이지 애플리케이션을 만들 수 있습니다.

반응 라우터 설정

React Router를 시작하려면 프로젝트에 React Router를 설치해야 합니다. npm이나 Yarn을 사용하여 이 작업을 수행할 수 있습니다.

npm install react-router-dom

또는

yarn add react-router-dom

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

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

경로 구성 요소

Route 구성 요소는 애플리케이션에서 경로를 정의하는 데 사용됩니다. 경로와 경로가 일치할 때 렌더링되어야 하는 구성 요소를 지정합니다.

예:

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 구성요소는 한 번에 하나의 경로만 렌더링되도록 합니다. 현재 URL과 일치하는 첫 번째 경로를 렌더링합니다.

예:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!