إزاي تعمل Routing صح في React باستخدام React Router
أهلاً بيك يا صديقي المبرمج. أكيد في يوم من الأيام، وأنت بتبني تطبيقك الأول بـ React، وقف قدامك سؤال محير: "أنا عايز المستخدم لما يدوس على اللينك ده يروح لصفحة معينة من غير ما الصفحة تعمل Reload أو ريفريش، أعمل ده إزاي؟". الإجابة ببساطة هي الـ Routing. في تطبيقات الـ Single Page Application أو الـ SPA، الموضوع بيختلف تماماً عن المواقع التقليدية اللي بتعتمد على ملفات HTML منفصلة. النهاردة هنشرح إزاي تستخدم مكتبة React Router عشان تبني تنقل احترافي في تطبيقك.
Table of contents [Show]
ليه محتاج React Router أصلاً؟
في الـ React، إحنا بنتعامل مع مكونات (Components). الـ React Router هي المكتبة القياسية اللي بتسمح لنا نتحكم في الـ URL بتاع المتصفح ونربطه بمكونات معينة تظهر للمستخدم بناءً على المسار ده. من غيرها، هتلاقي نفسك بتكتب منطق معقد جداً عشان تبدل الـ UI، وده طبعاً كابوس في الصيانة وتجربة المستخدم.
الخطوة الأولى: التثبيت والإعداد
قبل أي حاجة، لازم نثبت المكتبة في مشروعنا. افتح الـ Terminal واكتب الأمر ده:
npm install react-router-dom
بعد ما المكتبة تنزل، هنروح لملف index.js أو main.jsx ونلف التطبيق بتاعنا بـ BrowserRouter عشان نفعل ميزة التنقل في كل أجزاء التطبيق.
import { BrowserRouter } from 'react-router-dom';
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
الخطوة الثانية: إعداد المسارات (Defining Routes)
دلوقتي جه وقت السحر. هنستخدم Routes و Route عشان نحدد كل مسار هيعرض أنهي Component. الكلام ده بيتم جوه ملف App.js:
import { Routes, Route } from 'react-router-dom';
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}
إياك تستخدم وسم <a> التقليدي في React، لأنه بيعمل ريفريش للصفحة وده بيضيع كل الـ State بتاع التطبيق. الحل هو استخدام Link اللي بتوفره المكتبة:
import { Link } from 'react-router-dom';
<nav>
<Link to="/">الرئيسية</Link>
<Link to="/about">عن الموقع</Link>
</nav>
الخطوة الرابعة: التعامل مع الصفحات المفقودة (404 Not Found)
من أهم الحاجات في الـ User Experience (تجربة المستخدم) هي إنك تدي رسالة واضحة لو المستخدم دخل مسار مش موجود. ده بيتم عن طريق وضع Route بمسار *، وده معناه "أي حاجة تانية غير اللي اتعرفت قبل كده":
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
نصيحة من أخ لمبرمج
يا بطل، الـ Routing مش مجرد صفحات بتتنقل بينها، ده عصب التطبيق بتاعك. اتعلم إزاي تستخدم الـ Nested Routes (المسارات المتداخلة) عشان تعمل Dashboard احترافية، واهتم جداً بـ Protected Routes عشان تأمن الصفحات اللي محتاجة تسجيل دخول. التطبيق العملي هو اللي هيخلي المعلومة تثبت في دماغك، فجرب تعمل مشروع صغير فيه 3 صفحات على الأقل وطبق الكلام ده بإيدك.
بالتوفيق في رحلتك البرمجية، ولو وقف قدامك أي حاجة، أنا موجود!
