1. مقدمة عن جهاز التوجيه React

React Router عبارة عن مكتبة للتعامل مع التوجيه في تطبيقات React. فهو يسمح لتطبيقك بالتنقل بين المكونات وطرق العرض المختلفة دون إعادة تحميل الصفحة بالكامل، مما يجعل تجربة المستخدم سلسة.

2. الإعداد الأساسي

ابدأ بتثبيت React-router-dom:

npm install react-router-dom

إعداد التوجيه الأساسي باستخدام BrowserRouter، والمسارات، والمسار:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Home = () => 
Home
;
const About = () => 
About
;

const App = () => {
  return (
    } />
        } />
      
  );
};

export default App;

3. التوجيه المتداخل

بالنسبة للتطبيقات الأكثر تعقيدًا، يمكنك تداخل المسارات. فيما يلي كيفية إعداد المسارات المتداخلة في المكون الأصلي:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

const Dashboard = () => 
Dashboard Home
;
const Profile = () => 
Your Profile
;

const DashboardLayout = () => {
  return (
    

      } />
        } />
      
  );
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

4. التوجيه الديناميكي

يسمح لك التوجيه الديناميكي بتمرير المعلمات في عنوان URL. فيما يلي كيفية تحديد المسار الديناميكي والوصول إليه:

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

const User = () => {
  const { id } = useParams();
  return 
User ID: {id}
;
};

const App = () => {
  return (
    } />
      
  );
};

export default App;

5. الطرق المحمية

لتنفيذ المسارات المحمية، يمكنك إنشاء مكون PrivateRoute مخصص:

import { Navigate, Outlet } from 'react-router-dom';

const useAuth = () => {
  const user = { loggedIn: true }; // Replace with actual auth logic
  return user && user.loggedIn;
};

const PrivateRoute = () => {
  const isAuth = useAuth();
  return isAuth ?  : ;
};

const App = () => {
  return (
    } />
        }>
          } />
        
      
  );
};

export default App;

6. التنقل البرمجي

في بعض الأحيان، قد ترغب في التنقل برمجيًا، مثل بعد إرسال النموذج. استخدم ربط useNavigate في React Router v6:

import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic here...
    navigate('/dashboard');
  };

  return (
    

      
Login
      Login
    
  );
};

export default Login;

7. 404 صفحة

تعامل مع أخطاء 404 (لم يتم العثور عليها) عن طريق إنشاء مسار شامل:

const NotFound = () => 
404 - Page Not Found
;

const App = () => {
  return (
    } />
        } />
        } />
      
  );
};

export default App;

8. اعتبارات الأداء

بالنسبة للتطبيقات الكبيرة، يمكن أن تعمل مسارات التحميل البطيئة على تحسين الأداء. إليك كيفية تنفيذ التحميل البطيء باستخدام React.lazy() وSuspense:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

const App = () => {
  return (
    Loading...}>
        } />
          } />
        
  );
};

export default App;