我正在尝试创建我的第一个网站，但是在重定向到另一个页面时遇到了问题。我将Routes添加到App.jsx，并添加了指向Navbar的链接;在Navbar中单击"服务"会转到"/services"，但页面上什么也不显示，只有Navbar。我也尝试了NavLink，但没有任何变化。请帮助我找出问题所在。

import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/services" element={<Services />} />
          <Route path="/samples" element={<Samples />} />
          {/* <Route path="#reviews" element={<Reviews />} /> */}
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";

const Navbar = () => {
  const [toggleMenu, setToggleMenu] = useState(false); 

  return (
    <div>
      <div className='navbar'>
        <Link style={{textDecoration:"none"}} to="/">
          <img src={MainLogo} alt="main_logo" className="navbar_logo"/>
        </Link>
        <ul className='navbar_links'>
          <li>
            <Link to="/services">Services</Link>
          </li>
          <li>
            <Link to="/samples">Samples</Link>
          </li>
          <li>
            <Link to="/">Reviews</Link>
          </li>
          <li>
            <Link to="#gallery">Gallery</Link>
          </li>
          <li>
            <Link to="#about">About Us</Link>
          </li>
          <li>
            <Link to="#contacts">Contacts</Link>
          </li>
        </ul>
      </div>