如何点击NavBar的Contact链接跳转至首页Contact组件（Vite+React）

要实现点击导航栏的「Contact」链接后，留在首页并滚动到Contact组件位置，同时保留首页完整内容，只需调整锚点链接和组件标识即可，无需修改核心路由结构：

步骤1：给首页的Contact组件添加锚点ID #

修改Home.jsx，为Contact组件添加锚点容器（确保能被锚点定位到）：

// Home.jsx
import React from 'react';
import Hero from '../components/Hero';
import Mission from '../components/Mission';
import Contact from '../components/Contact';
import TestComp from '../components/TestComp';

const Home = () => {
  return (
    <> 
      <Hero />
      <Mission />
      <TestComp />
      {/* 给Contact组件添加锚点容器 */}
      <div id="contact-section">
        <Contact />
      </div>
    </>
  );
};

export default Home;

步骤2：修改导航栏的Contact链接指向锚点 #

修改NavBar.jsx里的Contact链接，将目标路由从/SettingsPage改为首页的锚点路径：

// NavBar.jsx
import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => {
  return (
    <nav className="bg-gray-800 p-4">
      <div className="container mx-auto flex items-center justify-between px-10">
        <div className="text-white font-bold text-lg"><Link to="/CommingSoon">Akadimia</Link></div>
        <ul className="flex space-x-5">
          <li className="text-white"><Link to="/">Home</Link></li>
          {/* 修改为锚点链接，指向首页的Contact区域 */}
          <li className="text-white"><Link to="/#contact-section">Contact</Link></li>
          <li className="text-white"><Link to="/Profile">Profile</Link></li>
        </ul>
      </div>
    </nav>
  );
};

export default NavBar;

可选：清理多余路由（如果不需要SettingsPage） #

如果SettingsPage组件只是误用来承载Contact内容，现在可以从App.jsx中移除相关路由：

// App.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import NavBar from './components/NavBar';
import Footer from './components/Footer';
import Home from './pages/Home';
import ProfilePage from './pages/ProfilePage';
import CommingSoon from './pages/ComingSoon';

function App() {
  return (
    <Router>
      <div>
        <NavBar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/Profile" element={<ProfilePage />} />
          <Route path="/CommingSoon" element={<CommingSoon />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  )
}

export default App

修改完成后，点击导航栏的Contact链接会直接滚动到首页的Contact组件位置，首页的Hero、Mission等所有内容都会保留，不会被替换为其他页面。

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