React中点击带链接组件如何实现页面内锚点跳转？

方案一：纯页面内锚点（无需路由切换） #

直接移除路由相关代码，将Home和Contact放在同一页面中，用HTML原生锚点实现滚动：

import '../styles/Nav.css'
import { Home } from '../components/Home'
import { Contact } from '../components/Contact'
import { Error } from '../components/Error'

export const Navbar = () => {
  return (
    <>
      {/* 导航栏 */}
      <div className='nav-major-container'>
        <div className='logo-container'>
          <p>Logo h</p>
        </div>
        <nav className='nav-container'>
          {/* 用a标签指向页面内的锚点ID */}
          <a href='#' className='home-link'>Home</a>
          <a href='#contact-section' className='contact-link'>Contact</a>
        </nav>
      </div>

      {/* 页面主体内容 */}
      <div className='page-content'>
        <Home />
        {/* 给Contact组件包裹容器并设置锚点ID */}
        <div id="contact-section">
          <Contact />
        </div>
      </div>
    </>
  )
}

说明：点击Contact链接后，页面会直接滚动到id="contact-section"的容器位置，和HTML原生锚点行为完全一致。如果需要平滑滚动，可在全局CSS中添加：html { scroll-behavior: smooth; }。

方案二：保留路由URL同步的锚点滚动 #

如果需要点击链接时同步更新URL（比如显示/contact），同时实现滚动效果，可以通过React Router监听路由变化触发滚动：

步骤1：创建统一的页面容器组件 #

// src/components/MainPage.jsx
import { Home } from './Home'
import { Contact } from './Contact'

export const MainPage = () => {
  return (
    <div className='page-content'>
      <Home />
      {/* 设置锚点目标ID */}
      <div id="contact-section">
        <Contact />
      </div>
    </div>
  )
}

步骤2：修改Navbar组件 #

import '../styles/Nav.css'
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
import { MainPage } from '../components/MainPage'
import { Error } from '../components/Error'
import { useEffect } from 'react'

// 封装路由监听与滚动逻辑
const ScrollToAnchor = () => {
  const location = useLocation()

  useEffect(() => {
    if (location.pathname === '/contact') {
      const targetElement = document.getElementById('contact-section')
      targetElement?.scrollIntoView({ behavior: 'smooth' }) // 平滑滚动到目标位置
    } else if (location.pathname === '/') {
      window.scrollTo({ top: 0, behavior: 'smooth' }) // 回到页面顶部
    }
  }, [location])

  return null
}

export const Navbar = () => {
  return (
    <Router>
      <ScrollToAnchor />
      {/* 导航栏 */}
      <div className='nav-major-container'>
        <div className='logo-container'>
          <p>Logo h</p>
        </div>
        <nav className='nav-container'>
          <Link to='/' className='home-link'>Home</Link>
          <Link to='/contact' className='contact-link'>Contact</Link>
        </nav>
      </div>

      <Routes>
        <Route path='/' element={<MainPage />}/>
        <Route path='/contact' element={<MainPage />}/>
        <Route path='*' element={<Error/>}/>
      </Routes>
    </Router>
  )
}

说明：点击Contact链接后，URL会切换为/contact，同时页面平滑滚动到Contact组件所在位置；点击Home则回到页面顶部。

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