React의 동적 라우팅-JS 튜토리얼-php.cn

React의 동적 라우팅

WBOY

풀어 주다： 2024-08-28 06:01:39

원래의

1042명이 탐색했습니다.

Dynamic routing in React

React의 동적 라우팅을 사용하면 동적 데이터나 매개변수를 기반으로 경로를 생성하여 애플리케이션 내에서 더욱 유연하고 강력한 탐색이 가능합니다. 이는 사용자 입력이나 기타 동적 요소를 기반으로 다양한 구성 요소를 렌더링해야 하는 애플리케이션에 특히 유용합니다.

React Router를 사용하여 동적 라우팅 설정
일반적으로 React-router-dom 라이브러리를 사용하여 React에서 동적 라우팅을 구현합니다. 단계별 가이드는 다음과 같습니다.

React Router 설치: 먼저, 아직 설치하지 않았다면 React-router-dom을 설치해야 합니다.
npm 설치 반응 라우터-dom

경로 만들기: 구성 요소를 사용하여 경로를 정의합니다. 매개변수를 캡처하려면 경로에 동적 세그먼트를 사용하세요.
자바스크립트

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

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

로그인 후 복사

라우트 매개변수에 액세스: useParams 후크를 사용하여 구성요소 내의 동적 매개변수에 액세스하세요.
자바스크립트

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

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

로그인 후 복사

예: 동적 사용자 프로필
URL의 사용자 ID를 기반으로 다양한 사용자 프로필로 이동하는 간단한 예를 만들어 보겠습니다.

홈 구성 요소: 이 구성 요소에는 다양한 사용자 프로필에 대한 링크가 있습니다.
자바스크립트

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

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <ul>
                <li><Link to="/user/1">User 1</Link></li>
                <li><Link to="/user/2">User 2</Link></li>
                <li><Link to="/user/3">User 3</Link></li>
            </ul>
        </div>
    );
};

export default Home;

로그인 후 복사

UserProfile 구성 요소: 이 구성 요소는 URL의 사용자 ID를 표시합니다.
자바스크립트

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

const UserProfile = () => {
    const { id } = useParams();

    return (
        <div>
            <h1>User Profile</h1>
            <p>User ID: {id}</p>
        </div>
    );
};

export default UserProfile;

로그인 후 복사

앱 구성요소: 이 구성요소는 라우터를 설정하고 경로를 정의합니다.
자바스크립트

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

const App = () => {
    return (
        <Router>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/user/:id" component={UserProfile} />
            </Switch>
        </Router>
    );
};

export default App;

로그인 후 복사

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