يتيح لك التوجيه الديناميكي في React إنشاء مسارات بناءً على البيانات أو المعلمات الديناميكية، مما يتيح تنقلًا أكثر مرونة وقوة داخل تطبيقك. يعد هذا مفيدًا بشكل خاص للتطبيقات التي تحتاج إلى عرض مكونات مختلفة بناءً على إدخال المستخدم أو العوامل الديناميكية الأخرى.

إعداد التوجيه الديناميكي باستخدام React Router
ستستخدم عادةً مكتبة React-router-dom لتنفيذ التوجيه الديناميكي في React. إليك دليل خطوة بخطوة:

تثبيت React Router: أولاً، تحتاج إلى تثبيت React-router-dom إذا لم تكن قد قمت بذلك بالفعل:
تثبيت npm رد فعل جهاز التوجيه دوم

إنشاء مسارات: حدد مساراتك باستخدام المكون. استخدم الأجزاء الديناميكية في المسار لالتقاط المعلمات.
جافا سكريبت

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.

المكون الرئيسي: سيكون لهذا المكون روابط لملفات تعريف المستخدمين المختلفة.
جافا سكريبت

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

const Home = () => {
    return (
        

            
Home
            
User 1
                
User 2
                
User 3
            
    );
};

export default Home;

مكون ملف تعريف المستخدم: سيعرض هذا المكون معرف المستخدم من عنوان URL.
جافا سكريبت

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;