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 (
        
    );
};

export default App;

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

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

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

    return (
        

            
User Profile
            
User ID: {id}
        
    );
};

export default UserProfile;

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

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

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

const Home = () => {
    return (
        

            
Home
            
User 1
                
User 2
                
User 3
            
    );
};

export default Home;

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

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

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

    return (
        

            
User Profile
            
User ID: {id}
        
    );
};

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 (
        
    );
};

export default App;