React の動的ルーティングを使用すると、動的データまたはパラメーターに基づいてルートを作成でき、アプリケーション内でより柔軟で強力なナビゲーションが可能になります。これは、ユーザー入力またはその他の動的要因に基づいてさまざまなコンポーネントをレンダリングする必要があるアプリケーションに特に役立ちます。

React Router を使用した動的ルーティングのセットアップ
通常、React で動的ルーティングを実装するには、react-router-dom ライブラリを使用します。ステップバイステップのガイドは次のとおりです:

React Router をインストールします: まず、react-router-dom をまだインストールしていない場合はインストールする必要があります:
npm install 反応ルーターダム

ルートの作成: コンポーネントを使用してルートを定義します。パス内の動的セグメントを使用してパラメータをキャプチャします。
JavaScript

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 フックを使用して、コンポーネント内の動的パラメーターにアクセスします。
JavaScript

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 に基づいてさまざまなユーザー プロファイルに移動する簡単な例を作成してみましょう。

ホーム コンポーネント: このコンポーネントには、さまざまなユーザー プロファイルへのリンクが含まれます。
JavaScript

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 を表示します。
JavaScript

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

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

    return (
        

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

export default UserProfile;

App コンポーネント: このコンポーネントはルーターをセットアップし、ルートを定義します。
JavaScript

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;