React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법-JS 튜토리얼-php.cn

React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법

王林

풀어 주다： 2023-09-29 17:45:15

원래의

918명이 탐색했습니다.

React Router使用指南：如何实现前端路由控制

React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법

단일 페이지 애플리케이션의 인기로 인해 프런트엔드 라우팅은 무시할 수 없는 중요한 부분이 되었습니다. React 생태계에서 가장 널리 사용되는 라우팅 라이브러리인 React Router는 풍부한 기능과 사용하기 쉬운 API를 제공하여 프런트엔드 라우팅 구현을 매우 간단하고 유연하게 만듭니다. 이 기사에서는 React Router를 사용하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

React Router 설치

먼저 React Router를 설치해야 합니다. React Router는 npm 명령을 통해 설치할 수 있습니다:

npm install react-router-dom

로그인 후 복사

설치가 완료되면 React Router의 관련 구성 요소를 프로젝트에 도입할 수 있습니다.

라우팅 컴포넌트 생성

React Router를 사용하기 전에 먼저 라우팅 컴포넌트를 생성해야 합니다. 일반적으로 라우팅 구성 요소를 별도의 파일에 넣습니다. 이 파일에서는 Route 구성 요소를 사용하여 라우팅 규칙을 정의할 수 있습니다. 다음은 간단한 예입니다. Route组件来定义路由规则。下面是一个简单的示例：

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

로그인 후 복사

在上面的代码中，我们使用了Switch组件来保证只有一个路由匹配成功。Route组件的exact属性指定了路径必须完全匹配。component属性指定了当路由匹配成功时渲染的组件。

创建路由对应的组件

在路由组件中，我们需要创建对应的子组件。这些子组件将会在匹配成功时被渲染。下面是一个简单的示例：

import React from 'react';

const Home = () => {
  return <h1>首页</h1>
};

const About = () => {
  return <h1>关于我们</h1>
};

const NotFound = () => {
  return <h1>404页面未找到</h1>
};

export { Home, About, NotFound };

로그인 후 복사

在上面的代码中，我们分别创建了Home、About和NotFound三个组件，用于展示对应的页面内容。

渲染应用

最后，我们需要在根组件中渲染应用。通常，我们会使用BrowserRouter

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

const Root = () => {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
};

export default Root;

로그인 후 복사

위 코드에서는 Switch 구성 요소를 사용하여 하나의 경로만 성공적으로 일치하는지 확인합니다. Route 구성 요소의 exact 속성은 경로가 정확히 일치해야 함을 지정합니다. comment 속성은 경로가 성공적으로 일치할 때 렌더링될 구성 요소를 지정합니다.

라우팅에 해당하는 컴포넌트 생성

라우팅 컴포넌트에서 해당 하위 컴포넌트를 생성해야 합니다. 일치가 성공하면 이러한 하위 구성 요소가 렌더링됩니다. 다음은 간단한 예입니다.

// App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

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

export default App;

// components/Home.js

import React from 'react';

const Home = () => {
  return 首页
};

export default Home;

// components/About.js

import React from 'react';

const About = () => {
  return 关于我们
};

export default About;

// components/NotFound.js

import React from 'react';

const NotFound = () => {
  return 404页面未找到
};

export default NotFound;

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './Root';

ReactDOM.render(, document.getElementById('root'));

로그인 후 복사

위 코드에서는 Home, About 및 NotFound라는 세 가지 구성 요소를 만들었습니다. 해당 페이지 콘텐츠.

앱 렌더링

BrowserRouter

위 내용은 React Router 사용자 가이드: 프런트엔드 라우팅 제어 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!