React Router error: no routes matched location "/#about" for my about page. (Vite ReactJs)-CodePudding

I tried to implement React Router Dom to route my About.jsx but my console gave me an error <--no routes matched location "/#about"--> I installed react-router-dom with npm and imported it, here I only kept the necessary components related to my error.

//My App.jsx:

import React, { useEffect } from "react";
import NavBar from "./NavBar";
import About from "./About";
import AOS from "aos";
import "aos/dist/aos.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 

function App() {
  useEffect(() => {
    AOS.init({
      duration: 2000,
    });
  }, []);
  return (
    <>
      <Router>
        <NavBar />
        <Routes>
          <Route path="/about" element={<About />}></Route>
        </Routes>
      </Router>
    </>
  );
}

export default App;

//My About.jsx:

import React from "react";

function About() {
  return (
    <>
      <section id="about">
        <div className="container">
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis
            explicabo, voluptates adipisci porro asperiores nesciunt optio
            consequatur minima facere debitis voluptas inventore unde
            repellendus repellat sed vitae ex! Excepturi, magni?
          </p>
        </div>
      </section>
    </>
  );
}

export default About;

I want to get React router to implement my about page when I click on it.

CodePudding user response：

From your error it looks like you have the "#" sign in the "/#about" path, but your route path is "/about".