为什么我在Hashlink之后会出现很多这样的错误

Question

错误 -

应用程序.jsx

import React, { useEffect, Suspense, Fragment } from "react";
import { useSelector } from "react-redux";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./pages/Root";
import FullPageScroll from "./UI/FullPageScroll";
import NestedFullPageScroll from "./UI/NestedFullPageScroll";
import HeroArea from "./components/Hero area/HeroArea";
import AboutSection from "./components/About me/AboutSection";
import PortfolioSection from "./components/Portfolio/PortfolioSection";
import ContactSection from "./components/Contact me/ContactSection";
import Footer from "./components/Footer/Footer";
import ProjectDetails from "./components/Project details/ProjectDetails";
import Navigation from "./components/Navigation/Navigation";
import { AnimatePresence } from "framer-motion";



const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      {
        index: true,
        element: (
          <FullPageScroll>
            
            <HeroArea id="home"/>
            <AboutSection id="about"/>
            <PortfolioSection id="portfolio"/>
            <ContactSection id="contact"/>
            <Footer />
          </FullPageScroll>

        ),
      },
      {
        path: 'portfolio/details',
        element: <Suspense><NestedFullPageScroll><ProjectDetails /></NestedFullPageScroll></Suspense>,
      },
    ],
  },
]);

const App = () => {
  const overlay = useSelector(state => state.navigation.isOpen);


  return <Fragment>
    <AnimatePresence>
    {overlay && <Navigation/>}
    </AnimatePresence>
    <RouterProvider router={router} />;
    </Fragment>
};

export default App;

导航.jsx

import React from "react";
import classes from "./Navigation.module.css";
import Container from "../../UI/Container";
import Overlay from "../../UI/Overlay";
import { HashLink } from 'react-router-hash-link';

function Navigation() {


  return (
    <Overlay>
      <nav className={classes.navigation}>
        <Container>
          <ul className={classes["nav-container"]}>
            <li><HashLink to={"/#home"}>Home</HashLink></li>
            <li><HashLink to={"/#about"}>About me</HashLink></li>
            <li><HashLink to={"/#portfolio"}>Portfolio</HashLink></li>
            <li><HashLink to={"/#contact"}>Contact me</HashLink></li>
          </ul>
        </Container>
      </nav>
    </Overlay>

  );
}

export default Navigation;
import React from "react";
import classes from "./Navigation.module.css";
import Container from "../../UI/Container";
import Overlay from "../../UI/Overlay";
import { HashLink } from 'react-router-hash-link';

function Navigation() {


  return (
    <Overlay>
      <nav className={classes.navigation}>
        <Container>
          <ul className={classes["nav-container"]}>
            <li><HashLink to={"/#home"}>Home</HashLink></li>
            <li><HashLink to={"/#about"}>About me</HashLink></li>
            <li><HashLink to={"/#portfolio"}>Portfolio</HashLink></li>
            <li><HashLink to={"/#contact"}>Contact me</HashLink></li>
          </ul>
        </Container>
      </nav>
    </Overlay>

  );
}

export default Navigation;

我正在开发一个完全滚动的作品集页面。我在路由中将此页面标记为主页。我还通过 redux 操作控制导航，然后通过条件控制导航。问题是我需要从导航转到主页的特定部分。我使用了react-router-hash-link。将 Hashlink 添加到列表后，我看到了很多错误。我将非常感谢您的帮助！
我尝试将 id 移至组件本身，但没有任何变化。我只需要在同一页面上导航到不同的部分

Answer 1

好吧，我明白我不能在 RouterProvider 之外使用 HashLink，但是如何在不破坏代码逻辑的情况下解决这个问题？