التوجيه (Routing) في React

يُعدّ التوجيه أمرًا أساسيًا لإنشاء تطبيقات React متعددة الصفحات. وتُعتبر React Router المكتبة القياسية لإدارة التنقل في React.

تثبيت React Router

npm install react-router-dom

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

إعداد الموجّه (Router)

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

التنقل بين الصفحات

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Accueil</Link>
      <Link to="/about">À propos</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

المسارات الديناميكية

مسارات ذات معاملات

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="/products/:category/:id" element={<ProductDetails />} />
      </Routes>
    </BrowserRouter>
  );
}

// Dans le composant UserProfile
function UserProfile() {
  const { id } = useParams();
  
  return <div>Profil de l'utilisateur {id}</div>;
}