React单页网站导航栏点击跳转至指定位置问题求助

你的问题出在两个核心点：Router的错误嵌套和react-router-dom v6默认不处理hash锚点滚动，以下是具体修复步骤：

1. 修正Router的位置 #

你将Router嵌套在Header组件内部，导致整个应用的路由上下文断裂，Link的锚点行为无法正确识别页面内的目标元素。必须把Router移到应用最外层，包裹所有路由相关组件。

修改App.js（假设你的根组件是App） #

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Templates from './Templates'; // 替换为你的Templates组件
import Resources from './Resources'; // 替换为你的Resources组件

function App() {
  return (
    <Router>
      <Header />
      {/* Outlet用于渲染子路由内容 */}
      <Outlet />
      <Footer />
      <Routes>
        <Route path="/" element={<div>首页内容</div>} />
        <Route path="/Templates" element={<Templates />} />
        <Route path="/Resources" element={<Resources />} />
      </Routes>
    </Router>
  );
}

export default App;

修正Header组件（移除内部的Router和无效路由） #

import React, { useState } from "react";
import "./Header.css";
import "../App.css";
import { GiUbisoftSun } from "react-icons/gi";
import { Link } from "react-router-dom";

function Header() {
  const [header, setHeader] = useState(false);

  return (
    <div className={header ? "header" : "header active"}>
      <div className="headerContainer">
        <div className="headerWrapper">
          <div className="logo">
            <GiUbisoftSun className="logoIcon" />
            <span className="logoTitle">SQUARESPACE</span>
          </div>
          <div className="links">
            <ul>
              <li className="linkProduct">
                <Link to="#footer">Product</Link>
              </li>
              <li className="linkTemplates">
                <Link to="/Templates">Templates</Link>
              </li>
              <li className="linkResources">
                <Link to="/Resources">Resources</Link>
              </li>
            </ul>
          </div>
          <div className="userEntry">
            <span className="logIn">LOG IN</span>
            <span className="getStarted">GET STARTED</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Header;

2. 配置锚点滚动行为 #

react-router-dom v6默认不会自动处理hash锚点的页面滚动，需要手动配置或实现滚动逻辑，以下是两种常用方案：

方案一：用createBrowserRouter配置全局滚动行为 #

这种方式可以统一处理所有路由的锚点滚动：

import React from 'react';
import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import Templates from './Templates';
import Resources from './Resources';

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <>
        <Header />
        <Outlet />
        <Footer />
      </>
    ),
    children: [
      { path: "/", element: <div>首页内容</div> },
      { path: "/Templates", element: <Templates /> },
      { path: "/Resources", element: <Resources /> },
    ],
  },
], {
  scrollBehavior: ({ router }) => {
    // 检测到hash时，滚动到对应元素
    if (router.location.hash) {
      const targetId = router.location.hash.slice(1);
      const element = document.getElementById(targetId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
    return { top: 0 };
  },
});

function App() {
  return <RouterProvider router={router} />;
}

export default App;

方案二：手动处理单个锚点的点击事件 #

如果只需要处理少数锚点，可以直接跳过路由的hash处理，手动触发滚动：

// 在Header组件中修改Product的Link
<li className="linkProduct">
  <a 
    href="#footer" 
    onClick={(e) => {
      e.preventDefault();
      document.getElementById('footer')?.scrollIntoView({ behavior: 'smooth' });
    }}
  >
    Product
  </a>
</li>

注意事项 #

• 不要在Routes中添加path="#footer"，hash是页面内锚点标识，不属于路由路径。
• 确保目标元素的id与Link的to属性值完全一致（区分大小写）。

内容的提问来源于stack exchange，提问作者voskid