我正在尝试创建一个Dashboard，但是我被嵌套的路由卡住了。就像我想在屏幕上有导航栏，侧边栏和页脚，但是只有主要的组件应该改变。
我在两个文件中使用了路由：App.js和Home.jsx。
App.js:

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/login/Login";
import Registeration from "./pages/registeration/Registeration";
import Home from "./pages/Home/Home";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/"
            element={
              <React.Fragment>
                <div className="login_page">
                  <Login />
                </div>
              </React.Fragment>
            }
          />
          <Route
            path="registeration"
            element={
              <React.Fragment>
                <div className="login_page">
                  <Registeration />
                </div>
              </React.Fragment>
            }
          />

          <Route path="home" element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Home.jsx:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Assets from "../../components/assets/Assets";
import Balance from "../../components/balance/Balance";
import Dashboard from "../../components/dashboard/Dashboard";
import { Footer } from "../../components/Footer/Footer";
import Navbar from "../../components/navbar/Navbar";
import OpenAccount from "../../components/openAccount/OpenAccount";
import Sidebar from "../../components/sidebar/Sidebar";
import "./Home.scss";

const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer">
        <Navbar />
        <div>
          <Routes>
            <Route path="/balance" element={<Balance />} />
            <Route path="/" element={<Dashboard />} />
            <Route path="/assets" element={<Assets />} />
            <Route path="/open-account" element={<OpenAccount />} />
          </Routes>
        </div>
        <Footer />
      </div>
    </div>
  );
};

export default Home;