React Router 4锚点链接导航后页面未滚动至锚点的问题咨询

你遇到的这个问题很常见——React Router 4 默认不会自动处理 URL 中的哈希锚点滚动，它只负责路由的匹配和组件渲染，锚点定位属于 DOM 操作范畴，需要我们手动实现。下面给你几种可行的解决方式：

方法一：在路由组件中通过生命周期/Effect 监听哈希变化 #

如果你的路由组件是类组件（就像你提供的代码那样），可以利用 componentDidMount 和 componentDidUpdate 钩子来检测哈希变化，然后滚动到目标元素：

import { withRouter } from 'react-router-dom'
// 记得导入 withRouter，确保组件能拿到 location props

export default class SolutionsComponent extends Component {
  constructor() {
    super()
    this.state = { isLoading: true }
  }

  componentDidMount() {
    // 组件挂载时检查是否有哈希锚点
    this.scrollToTargetAnchor()
  }

  componentDidUpdate(prevProps) {
    // 当路由的哈希值发生变化时，触发滚动
    if (this.props.location.hash !== prevProps.location.hash) {
      this.scrollToTargetAnchor()
    }
  }

  scrollToTargetAnchor = () => {
    const hash = this.props.location.hash
    if (hash) {
      // 去掉哈希符号，获取目标元素的 ID
      const targetId = hash.replace('#', '')
      const targetElement = document.getElementById(targetId)
      if (targetElement) {
        // 滚动到目标元素，behavior: 'smooth' 是可选的平滑滚动效果
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    }
  }

  render() {
    return (
      <Grid className='solutions' fluid>
        <Row className='someClass'>
          <div>
            {/* 这里建议修正锚点元素：要么去掉 a 标签直接给 h2 加 id，要么把 href 改成 #ipos */}
            <h2 id='ipos'>Ipos morna santos paros</h2>
            ...
          </div>
        </Row>
      </Grid>
    )
  }
}

// 用 withRouter 包裹组件，让它能获取到 location 等路由相关 props
export default withRouter(SolutionsComponent)

如果你用的是函数组件，可以用 useLocation 和 useEffect 钩子实现同样的逻辑：

import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'

export default function Solutions() {
  const location = useLocation()

  useEffect(() => {
    if (location.hash) {
      const targetId = location.hash.slice(1)
      const targetElement = document.getElementById(targetId)
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }, [location.hash]) // 仅当哈希值变化时触发

  return (
    <Grid className='solutions' fluid>
      <Row className='someClass'>
        <div>
          <h2 id='ipos'>Ipos morna santos paros</h2>
          ...
        </div>
      </Row>
    </Grid>
  )
}

方法二：自定义锚点 Link 组件 #

你也可以封装一个自定义的 AnchorLink 组件，在点击时同时处理路由跳转和滚动，但这种方法需要注意：如果是同路由下的哈希变化，组件不会重新挂载，所以还是需要结合上面的监听逻辑来覆盖这种场景。示例代码如下：

import { Link } from 'react-router-dom'

const AnchorLink = ({ to, children, ...props }) => {
  const handleClick = (e) => {
    // 先让 Link 完成路由跳转
    const link = e.currentTarget
    setTimeout(() => {
      const hash = link.hash
      if (hash) {
        const targetElement = document.getElementById(hash.replace('#', ''))
        if (targetElement) {
          targetElement.scrollIntoView({ behavior: 'smooth' })
        }
      }
    }, 100) // 加个小延迟确保路由已切换
  }

  return (
    <Link to={to} onClick={handleClick} {...props}>
      {children}
    </Link>
  )
}

// 使用时替换原来的 Link：
<AnchorLink to='/solution#ipos'>TESTING ANCHOR</AnchorLink>

注意事项 #

• 确保你的锚点元素的 id 和 URL 中的哈希值完全一致（比如 URL 是 #ipos，元素 id 就是 ipos）。
• 原代码中锚点元素的 <a href='ipos'> 要改成 <a href='#ipos'>，否则点击这个 a 标签会跳转到 /ipos 路由而不是页面内的锚点，更推荐直接给 h2 设置 id 去掉多余的 a 标签。

内容的提问来源于stack exchange，提问作者S. Schenk