Javascript 在reactrouterdom 6.10.0中重定向不起作用的原因是什么

我在SPA中创建了react-three-fiber个项目组合，但在将其部署到互联网上之前，我必须创建一个隐私策略页面.为此，我添加了一个页脚，其中有一个应该显示此页面的链接. 当我点击这个链接时，url地址变成"localhost:5173/pages/Privacy"，但我没有任何页面出现. 我想我什么都试过了，Navigate,Link,CreateBrowser...有人能帮我解决这个问题吗？

我使用的技术是:

"dependencies": {
    "@emailjs/browser": " 3.11.0",
    "@react-three/drei": "9.66.0",
    "@react-three/fiber": "8.12.2",
    "framer-motion": "10.12.7",
    "maath": " 0.5.3",
    "react": " 18.2.0",
    "react-dom": " 18.2.0",
    "react-router-dom": " 6.10.0",
    "react-tilt": " 1.0.2",
    "react-vertical-timeline-component": " 3.6.0",
    "three": " 0.152.2"
  },

Main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
)

App.jsx:

import { Routes, Route } from "react-router-dom";
import {
  About,
  Contact,
  Experience,
  Tech,
  Feedbacks,
  Hero,
  Navbar,
  Works,
  StarsCanvas,
  Footer,
} from "./components";
import Privacy from "../src/components/pages/Privacy";

// Structure de notre site
const App = () => {
  return (
    <div className="relative z-0 bg-primary">
      <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
        <Navbar />
        <Hero />
      </div>

      <About />
      <Experience />
      <Tech />
      <Works />
      <Feedbacks />

      <div className="relative z-0">
        <Contact />
        <StarsCanvas />
      </div>

      <Footer />
      <Routes>
        <Route path="../src/components/pages/Privacy" element={<Privacy />} />
      </Routes>
    </div>
  );
};

export default App;

Index.js:

import { EarthCanvas, BallCanvas, ComputersCanvas, StarsCanvas } from './canvas';
import Hero from './Hero';
import Navbar from './Navbar';
import About from './About';
import Tech from './Tech';
import Experience from './Experience';
import Works from './Works';
import Feedbacks from './Feedbacks';
import Contact from './Contact';
import Footer from './Footer';
import Privacy from './pages/Privacy'

export {
  Hero,
  Navbar,
  About,
  Tech,
  Experience,
  Works,
  Feedbacks,
  Contact,
  EarthCanvas, 
  BallCanvas, 
  ComputersCanvas, 
  StarsCanvas,
  Footer, 
  Privacy
}

Footer.jsx:

import React from "react";
import { Link } from "react-router-dom";
import { styles } from "../styles";
import { logo } from "../assets";

const Footer = () => {
  return (
    <nav
      className={`${styles.paddingX} w-full flex items-center py-5 bg-primary`}
    >
      <div className="w-full flex justify-between items-center max-w-7xl mx-auto">
        <div className="flex items-center gap-2">
          <img src={logo} alt="logo" className="w-9 h-9 object-contain" />
          <p className="text-white/[0.6] text-[15px] font-bold cursor-pointer flex">
            Création Yann Cotard.
          </p>
        </div>
        <Link to="./pages/Privacy">
          <p className="text-white/[0.6] text-[15px] cursor-pointer flex">
            Politique de Confidentialité
          </p>
        </Link>
      </div>
    </nav>
  );
};

export default Footer;

我try 了react-router个文档中描述的所有方法，甚至向chat gpt寻求帮助，但都没有结果.