Динамическая маршрутизация в React позволяет создавать маршруты на основе динамических данных или параметров, обеспечивая более гибкую и мощную навигацию внутри вашего приложения. Это особенно полезно для приложений, которым необходимо отображать различные компоненты на основе пользовательского ввода или других динамических факторов.

Настройка динамической маршрутизации с помощью React Router
Обычно вы будете использовать библиотеку реагирования-маршрутизатора-dom для реализации динамической маршрутизации в React. Вот пошаговое руководство:

Установите React Router: сначала вам нужно установить React-router-dom, если вы еще этого не сделали:
npm установить реакцию-маршрутизатор-dom

Создание маршрутов: определите свои маршруты с помощью компонента. Используйте динамические сегменты в пути для сбора параметров.
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-адресе.

Домашний компонент: этот компонент будет содержать ссылки на различные профили пользователей.
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-адреса.
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;

Компонент приложения: этот компонент настраивает маршрутизатор и определяет маршруты.
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;