كيفية الربط بين الصفحات في React والتنقل بينهم

كما تعلم، كل صفحة ويب في React عبارة عن مكون Component ويتم تبديل المكون الذي يتم عرضه في الصفحة من خلال نظام التوجيه Route ومكتبة React Router التي تعتمد على شريط العنوان URL

• الصفحة الرئيسية App.js تستورد جميع المكونات 
• تقوم بتعريف المسارات

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// تضمين المكونات و الصفحات
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

ويتم تعريف المسارات ضمن المكون Link ليعبر لنا عن رابط معين مع الاسم الذي سيظهر 

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

الآن عند الضغط على الرابط، سيتم تغيير عنوان URL للصفحة، و بالتالي إعادة اختبار أي مكون يجب أن يتم عرضه من بين Routes

.

بتاريخ 10 دقائق مضت قال Mohamed Montaser3:

.

التعليق غير مفيد ولا يشرح المشكلة، عليك ذكر التفاصيل كاملة. المثال السابق لتفهم أنه عليك بناء مكون يعرض الروابط من خلال Link يمكنك وضعه في nav ثم ربط المسارات مع عرض المكونات بالاستعانة ب Route

الموضوع مشروح في الدورة، حبذا لو تعيد الدروس لفهم أفضل.

شكرا لك

بتاريخ الآن قال Wael Aljamal:

التعليق غير مفيد ولا يشرح المشكلة، عليك ذكر التفاصيل كاملة. المثال السابق لتفهم أنه عليك بناء مكون يعرض الروابط من خلال Link يمكنك وضعه في nav ثم ربط المسارات مع عرض المكونات بالاستعانة ب Route

الموضوع مشروح في الدورة، حبذا لو تعيد الدروس لفهم أفضل.

شكرا لك

اين ؟؟

بتاريخ الآن قال Wael Aljamal:

التعليق غير مفيد ولا يشرح المشكلة، عليك ذكر التفاصيل كاملة. المثال السابق لتفهم أنه عليك بناء مكون يعرض الروابط من خلال Link يمكنك وضعه في nav ثم ربط المسارات مع عرض المكونات بالاستعانة ب Route

الموضوع مشروح في الدورة، حبذا لو تعيد الدروس لفهم أفضل.

شكرا لك

لم يتم شرحها

بتاريخ 2 دقائق مضت قال Mohamed Montaser3:

اين ؟؟

معك حق، يبدو أنها غير مشروحة عليك بالدرس التالي

• ملاحظة هامة: عندما تضع سؤالك أرجو بذل بعض الجهد فيه ليفهم المدرب المشكلة ولا يطرح عدة أسئلة ليصل لصلب الموضوع

استخدم محرر الشيفرات لوضع الأكواد البرمجية

بتاريخ 4 ساعات قال Wael Aljamal:

استخدم محرر الشيفرات لوضع الأكواد البرمجية

 

انها غير ظاهره عندي 

بتاريخ الآن قال Mohamed Montaser3:

انها غير ظاهره عندي 

يبدو أنك مستخدم Zoom في المتصفح اعمل ctrl , - سوياً لتصغير العرض

...

بتاريخ 4 ساعات قال Mohamed Montaser3:

...

الموضوع غريب، مما مقاس الشاشة لديك؟ 

حاول عمل تصغير أكثر

بتاريخ الآن قال Wael Aljamal:

الموضوع غريب، مما مقاس الشاشة لديك؟ 

حاول عمل تصغير أكثر

في موضوع الشاشاة انا هشتري شاشه قريب فا ايه افضل شاشه ips ممكن اشتريها في الفئه المتوسطه

بتاريخ الآن قال Mohamed Montaser3:

في موضوع الشاشاة انا هشتري شاشه قريب فا ايه افضل شاشه ips ممكن اشتريها في الفئه المتوسطه

بصراحة ليس لدي فكرة عن الأنواع ولا الأسعار 

بتاريخ 17 ساعات قال Mohamed Montaser3:

في موضوع الشاشاة انا هشتري شاشه قريب فا ايه افضل شاشه ips ممكن اشتريها في الفئه المتوسطه

من تجربتي، يمكنني أن أنصحك بشاشات samsung. 

هذه الشاشة تعتبر جيدة كنت أستخدمها لفترة طويلة، و يوجد هذه الشاشة أيضًا. يوجد العديد من المتاجر التي يمكنك الشراء منها مثل select و  compu me و b.tech و يمكنك الشراء من موقع نون أيضًا