إزاي تستخدم React Router وتبني موقع يتنقل بين الصفحات ؟

[x32x01]

إزاي تستخدم React Router وتبني موقع يتنقل بين الصفحات بسهولة ؟​

بص يا صاحبي، لما تيجي تبني تطبيق React شغال على صفحة واحدة (SPA)، هييجي وقت تسأل نفسك: إزاي أقدر أتنقل بين الصفحات من غير ما أعمل Refresh للصفحة كلها؟
هنا ييجي دور React Router. الموضوع مش معقد زي ما بعض الناس فاكرة، بس محتاج تفهم الأساسيات اللي هنشرحهامع بعض خطوة بخطوة دلوقتي.

- أول حاجة: نجهز الـ Router في المشروع​

خلينا نبدأ بالأساسيات، هتفتح الـ terminal وتكتب:

npm install react-router-dom

كده ضفت المكتبة المطلوبة. دي المكتبة المسؤولة عن كل التنقلات بين صفحات تطبيقك.
ـ بعد كده، في index.js، هتحط الـ BrowserRouter حوالين التطبيق بتاعك وده زي ما يكون مدير المرور اللي بينظم التنقلات:

import { BrowserRouter } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

ده كأنك بتقول للـ React Router: "انتا اللي هتتحكم في التحويل بين الصفحات".

- دلوقتي بقى هنضيف الصفحات
طب كويس إزاي أضيف صفحات؟ الموضوع بسيط، في ملف App.js، هنستخدم الـ Routes و Route عشان نحدد كل صفحة.
شوف المثال ده:

import { Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}
export default App;

اللي بيحصل هنا إنك بتقول لـ React Router: "لما المستخدم يروح للرابط /about، وديه على صفحة About، ولو راح للرابط / وديه على صفحة Home".

- جزء مهم: روابط التنقل
طب دلوقتي عندك صفحات إزاي بقى تخلي المستخدم يتنقل بينهم؟ هنا تيجي حاجة مهمة جدا في React Router وهي الـ Link. بدل ما تستخدم <a> العادية اللي بتعمل Reload للصفحة.

مثلا، لو عندك قائمة تنقل:

import { Link } from 'react-router-dom';
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

دلوقتي لما المستخدم يضغط على أي لينك، هيتم التنقل من غير أي "Refresh" للصفحة.

- طب إيه موضوع الـ Nested Routes؟​

لو مشروعك كبير شوية وعندك صفحات متفرعة هنا بييجي دور الـ Nested Routes. تخيل معايا، أنت عندك صفحة لكل المستخدمين، وفي نفس الوقت عايز تعمل صفحة منفصلة لكل مستخدم لما تضغط عليه.
ممكن تعمل ده كالتالي:

<Route path="/users" element={<Users />}>
  <Route path=":id" element={<UserProfile />} />
</Route>

بكده، الـ Route /users/1 هيفتح صفحة المستخدم اللي رقم الـ ID بتاعه هو 1. وده بينطبق على أي مستخدم تضغط عليه.

الخلاصه
بإضافة React Router لمشروعك أنت بتخلي التنقل بين الصفحات سلس ومن غير وجع دماغ. والناس اللي بتستخدم الموقع مش هتحس بأي بطء، وكل حاجة هتبقى على طول جاهزة قدامهم.
دي بس البداية، لكن React Router عنده إمكانيات أكتر لو عايز تعمق فيها زي الـ Redirect، Protected Routes وغيره ...
وبكده نكون خلصنا شرحنا عن الـ React Router. لو عندك سؤال أو استفسار، اكتب في الكومنتات. ومتنساش تقول رأيك في الشرح!