مشكلة في استخدام react router

بسبب أنك قمت بتحديد نفس المسار لمكون Background لاحظ path="/" بالتالي تم تجاهل المكون Home وأصبح يتم عرض Background، الصحيح هو تحديد مسار واحد فقط لكل مكون.

وأيضًا في الإصدار 6 من react-router-dom، يجب أن تكون جميع مكونات <Route> موجودة داخل مكون <Routes> ليتمكن الراوتر من اختيار المسار الصحيح وعرضه.

import Background from "./Components/Background/Background";
import Navbar from "./Components/Navbar/Navbar";
import Home from "./Components/Home/Home";

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

function App() {
  return (
    <BrowserRouter>
      <Background />
      <Navbar />

      <Routes>
        <Route path="/" element={<Home />} />


      </Routes>
    </BrowserRouter>
  );
}

export default App;

والمكونات <Background />  و<Navbar />   ستكون ثابتة وستظهر في جميع الصفحات حيث لم أقم بتحديد مسار لهم.