我有一个网站，使用react路由器dom.路由工作正常，但我不能设置主页路由器作为主页，当我下载网站，主页是一个空的背景.我检查了家庭路由器是第一个，显然路径是正确的：“/"。有人能帮我找出问题吗？非常感谢。
App.js

import { Home } from "./components/pages/home/home.js";
import { Nav } from "./components/pages/navbar/navBar.js";
import { Reviews } from "./components/pages/review.js";
import { About } from "./components/pages/aboutUs";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import React from "react";

function App() {
  return (
    <section className="App">
      <BrowserRouter>
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/aboutUs" element={<About />} />
          <Route path="/review" element={<Reviews />} />
        </Routes>
      </BrowserRouter>
    </section>
  );
}

export default App;

home.js

import React from "react";
import "./home.css";
import Carousel from "../../../components/carrousel/carousel";

export function Home() {
  const slides = [
    "https://i.ytimg.com/vi/DCOICaqQoEY/maxresdefault.jpg",
    "https://unfilteredgamer.com/wp-content/uploads/2022/03/terraforming-mars-ares-expedition-review-header.jpg",
    "https://gamecows.com/wp-content/uploads/2022/06/Ark-Nova-Board-Game-Featured.jpg",
  ];
  return (
    <div className="container">
      <div className="home">
        <div className="home-inner">
          <Carousel slides={slides} />
        </div>
        <div className="quotes">
          <img
            src="https://ih1.redbubble.net/image.1889966854.5963/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg"
            alt="gamer-quote-1"
          ></img>
          <img
            src="https://ih1.redbubble.net/image.967398882.3526/st,small,507x507-pad,600x600,f8f8f8.jpg"
            alt="gamer-quote-2"
          ></img>
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8_bOcNKvjb-NyMlFwqxOkfCPieb1CJcLImN1CsyPqtLXrk7lTn1BG_fUTso1W-SCoblo&usqp=CAU"
            alt="gamer-quote-3"
          ></img>
        </div>
      </div>
    </div>
  );
}

NavBar.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./navBar.css";

export const Nav = () => {
  const [showMenu, setShowMenu] = useState(false);

  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };

  return (
    <nav className="nav">
      <button className="navbar-toggle" onClick={toggleMenu}>
        <i className="bi bi-menu-button-fill"></i>
        {showMenu && (
          <div className="navbar-collapse" id="navbar-collapse">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link className="nav-link" to="/">
                  Home
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/review">
                  Review
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/aboutUs">
                  About Us
                </Link>
              </li>
            </ul>
          </div>
        )}
      </button>
    </nav>
  );
};