Reactjs 使用VITE的Reaction应用程序的配置是否正确

我用维生素E创建了一款react 应用程序.

这是我的App.jsx

import './styles.css'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/pages/About'
import Resume from './components/pages/Resume'
import Work from './components/pages/Work'
import Contact from './components/pages/Contact'
function App() {
  return (
    <>
    <BrowserRouter>

        <Routes>
          <Route path='/' element={<Home/>}>
            <Route path='about' element={About}></Route>
            <Route path='resume' element={Resume}></Route>
            <Route path='work' element={Work}></Route>
            <Route path='contact' element={Contact}></Route>
          </Route>
        </Routes>

    </BrowserRouter>
     
    </>
  )
}

export default App

这是我的家.jsx

import NavBar from "./pages/NavBar";
import Header from "./pages/Header";
import { Outlet, useNavigate } from "react-router-dom";
import Profile from "./pages/Profile";
// import About from "./pages/About";
// import Resume from "./pages/Resume";
import Contact from "./pages/Contact";
import { useEffect } from "react";

function Home() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/about");
  }, []);
  return (
    <>
      <Header></Header>
      <div className="d-flex1 gap-3">
        <Profile></Profile>
        <div className="w-100">
          <div className=" navbar d-flex justify-content-end">
            <NavBar></NavBar>
          </div>
          <Outlet />
          {/* <Resume></Resume> */}
          {/* <About></About> */}
          <Contact></Contact>
        </div>
      </div>
    </>
  );
}

export default Home;

This is my package.json

这是我的NabBar.jsx

import * as Lucide from "lucide-react";
import { NavLink, useLocation } from "react-router-dom";
function NavBar() {
  const location = useLocation();

  const activeLink = location.pathname.split("/").pop();

  return (
    <>
      <div>
        <div className="d-flex gap-3 card-effect mt-3 ">
          <NavLink
            to="/about"
            className={`icon  ${activeLink === "home" ? "active" : null}`}
          >
            <Lucide.HomeIcon></Lucide.HomeIcon>
            <p>Home</p>
          </NavLink>
          <NavLink
            to="/resume"
            className={`icon  ${activeLink === "resume" ? "active" : null}`}
          >
            <Lucide.FileTextIcon></Lucide.FileTextIcon>
            <p>Resume</p>
          </NavLink>
          <NavLink
            to="/work"
            className={`icon  ${activeLink === "work" ? "active" : null}`}
          >
            <Lucide.BriefcaseIcon></Lucide.BriefcaseIcon>
            <p>Work</p>
          </NavLink>
          <NavLink
            to="/contact"
            className={`icon  ${activeLink === "contact" ? "active" : null}`}
          >
            <Lucide.ContactIcon></Lucide.ContactIcon>
            <p>Contact</p>
          </NavLink>
        </div>
      </div>
    </>
  );
}

export default NavBar;

现在，当我试图导航到http://localhost:5173/about时，about组件没有呈现.我已经判断了多个在线来源的解决方案，但我找不到任何.同样的实现在我的另一个项目中也是有效的，在那里这个项目是使用repeat-react-app创建的.