지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

WBOY
풀어 주다： 2024-07-18 22:25:02
원래의
505명이 탐색했습니다.

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

원천：dev.to
이전 기사：주니어 레벨: React에서 양식 관리하기 다음 기사：JavaScript 콘솔 메소드 탐색: `console.log()` 너머
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1895
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2060
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1731
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1635
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1647
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿