مشكلة في عرض المكون بسبب React Router

توضيح الخطأ المرفق:

TypeError: Cannot read properties of undefined (reading 'text1')

يعني أن الكود يحاول الوصول إلى الخاصية text1 من كائن غير موجود (undefined).

مكون Hero.jsx، في السطر 23، حاولت الوصول إلى:

props.something.text1 // لكن something هنا undefined

الحل:

1. افحص الـ props التي يستقبلها مكون Hero:

افتح ملف Hero.jsx وابحث عن السطر الذي فيه props.text1.

3. تأكد أنك ترسل props بشكل صحيح من الأب:

مثال:

<Hero content={{ text1: "مرحبا" }} />

بالتوفيق

لم افهم ما تقصده ماهي علاقة prop حيث هو كائن نصي من اجل تنسيق جسم الموقع 

مشكلتي هي مع router هل هناك خطأ في router

المشكلة في استخدامك لـ React Router أنت بحاجة إلى إعادة دراسة الأساسيات الخاصة به سواء على اليوتيوب أو من خلال دروس كالتالي:

في ملف src\App.jsx يجب حذف مكون الـ Router طالما استخدمته بالفعل في src\Components\route.jsx فلا يصح استخدامه مرتين، وكذلك  هناك نسختين من المكوّن Hero يتم عرضهم في نفس الوقت، حيث نسخة يتم عرضها يدوياً داخل App.jsx وتحصل على جميع الـ props الصحيحة.

ونسخة ثانية يُنشئها ملف route.jsx لأنك وضعتها كعنصر المسار “/” ولا تصلها أي props، لذلك تكون heroData = undefined 

عليك حذف Hero من الراوتر، وضع بدلاً منه مكون رئيسي يمرر البيانات وهو App:

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "../App"; 
import About from "./About/About";

const router = createBrowserRouter([
  { path: "/", element: <App /> }, 
  { path: "/about", element: <About /> },
]);

export default function AppRoutes() {
  return <RouterProvider router={router} />;
}

ثم في ملف src\main.jsx استخدم مكون AppRoutes لعرض التطبيق:

import ReactDOM from "react-dom/client";
import AppRoutes from "./Components/route";

ReactDOM.createRoot(document.getElementById("root")).render(<AppRoutes />);

أرفقت لك المشروع بعد التعديل.

Apple.rar