مشكلة في مشروع الإعداد الصحيح لـ react-router

هذا الخطأ سببه أن كل ما يوضع داخل <Routes> لابد أن يكون <Route> فقط أو <React.Fragment> يحتوي فقط على <Route> لكن لاحظ أنك وضعت داخله <Background /> ، <Hero /> بشكل مباشر وهذا غير مسموح.
لهذا قم بنقل <Background /> خارج <Routes> لأنه ليس مسار (Routes) بل مكون أعتقد تريد أن يظهر دائما في كل الصفحات ولاحظ عند استخدام المكون Hero لابد من إرسال الخواص التي يريدها heroData ، heroCount، playStatus، setHeroCount ، setPlayStatus فهي ضرورية لكي يظهر المكون Hero بصورة صحيحة.

ليصبح الكود بعد التعديل كالتالي

<>
  <div>
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route
          path="/Hero"
          element={
            <Hero
              heroData={heroData[heroCount]}
              heroCount={heroCount}
              playStatus={playStatus}
              setHeroCount={setHeroCount}
              setPlayStatus={setPlayStatus}
            />
          }
        />
      </Routes>

      {/* هذا العنصر يجب أن يكون خارج <Routes> */}
      <Background playStatus={playStatus} heroCount={heroCount} />
    </BrowserRouter>
  </div>
</>

لا اريد  ملف Background.jsx يعرض في كل صفحات أريده يعرض مع Hero.jsx في صفحة الرئيسيه 

بتاريخ 2 ساعة قال Hxfhf Ucicic:

لا اريد  ملف Background.jsx يعرض في كل صفحات أريده يعرض مع Hero.jsx في صفحة الرئيسيه 

أي شيء تضعه خارج <Routes>  كالـ <Navbar>سيظهر في جميع الصفحات، بالتالي يجب أن تضع مكون <Background /> داخل المسار الخاص بالصفحة الرئيسية مع مكون <Hero />، كذلك عليك تعديل المسار إلى / والذي يعني الصفحة الرئيسية:

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


return (
  <>
    <div>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route
            path="/" 
            element={
              <>
                <Hero
                  heroData={heroData[heroCount]}
                  heroCount={heroCount}
                  playStatus={playStatus}
                  setHeroCount={setHeroCount}
                  setPlayStatus={setPlayStatus}
                />
                {/* هنا*/}
                <Background playStatus={playStatus} heroCount={heroCount} />
              </>
            }
          />


        </Routes>
      </BrowserRouter>
    </div>
  </>
);