React中Header内Link锚点跳转失效问题求助

核心问题分析 #

• 你在Header中使用的react-router-dom的Link组件仅用于路由页面跳转，不支持单页内的hash锚点跳转，需使用react-router-hash-link提供的HashLink组件。
• 多处重复嵌套BrowserRouter（Header、Contact中均导入），React路由要求整个应用只能存在一个BrowserRouter根容器。
• 组件内错误重复添加<body>标签，单页应用的<body>应仅存在于public/index.html中，组件无需额外包裹。

修复步骤 #

1. 替换Header中的Link为HashLink #

修改Header.js，导入HashLink并替换原有Link，同时清理多余的标签：

import React from "react";
// 替换为react-router-hash-link的HashLink
import { HashLink as Link } from "react-router-hash-link";

export default class Header extends React.Component {
  render() {
    return (
      <div className="App font-inter min-h-screen bg-orange-100 p-10">
        <div className="p-5">
          <h1 className="text-8xl text-yellow-900">***</h1>
          <h2 className="indent-20 text-4xl text-yellow-900">
            ****
          </h2>
        </div>
        <div className="pl-20 space-y-4">
          <div className="p-5">
            <h1 className="text-4xl text-yellow-900">Links:</h1>
            <div className="indent-12 text-3xl text-yellow-700">
              <h2>Github</h2>
              <h2>LinkedIn</h2>
              <h2>Behanced</h2>
            </div>
          </div>
          <div>
            <Link to="#contact">
              <h1 className="text-4xl text-yellow-900 hover:text-yellow-800">
                Contact:
              </h1>
            </Link>
            <div className="p-1 indent-12 text-3xl text-yellow-700 ">
              <h2> ****** </h2>
              <h2 className="p-1.5"> *** </h2>
            </div>
          </div>
          <div>
            <Link to="#about">
              <h1 className="text-4xl text-yellow-900 hover:text-yellow-800">
                About Me
              </h1>
            </Link>
          </div>
          <div>
            <Link to="#resume">
              <h1 className="text-4xl text-yellow-900 hover:text-yellow-800">
                Resume
              </h1>
            </Link>
          </div>
          <div>
            <Link to="#projects">
              <h1 className="text-4xl text-yellow-900 hover:text-yellow-800">
                Projects:
              </h1>
            </Link>
            <div className="pt-2 indent-12 text-3xl text-yellow-700">
              <h2>Link-Tree Style Website</h2>
              <h2>Calulator</h2>
              <h2>Static Portfolio Website</h2>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

2. 清理Contact组件的冗余代码 #

移除Contact.js中的BrowserRouter导入和多余<body>标签：

import React from "react";

export default function Contact() {
  return (
    <section id="contact" className="min-h-screen bg-orange-100 p-10">
      <div className="App font-inter p-5">
        <h1 className="text-7xl text-yellow-900"> Contact </h1>
        <div>
          <p className="pt-[1rem] pl-[6rem] absolute w-[50rem] text-4xl text-yellow-900"></p>
        </div>
      </div>
    </section>
  );
}

3. 确保App.js的路由结构唯一 #

保留App.js中唯一的BrowserRouter容器，无需在内部组件重复添加：

import { BrowserRouter } from "react-router-dom";
import Header from "./pages/Header";
import About from "./pages/About";
import Resume from "./pages/Resume";
import Projects from "./pages/projects";
import Contact from "./pages/Contact";
import Card from "./card/card";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <About />
      <Resume />
      <Card
        img={require("./img/resume.png")}
        title="Resume"
        description=""
        button="download"
        button2 = "view"
      />
      <Projects />
      <Contact/>
    </BrowserRouter>
  );
}

额外注意事项 #

• 确保所有目标section（About、Resume、Projects等）都正确设置对应id属性，如<section id="about">、<section id="resume">。
• 如需平滑滚动效果，可给HashLink添加smooth属性：<Link smooth to="#contact">Contact</Link>

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