React中使用Browser Router路由到组件内指定元素的问题

要实现路由到Contacts组件后直接定位到3rdDiv，可以通过锚点链接+React Router钩子监听滚动来实现，具体步骤如下：

1. 更新导航链接，添加锚点 #

修改navbar.js中的NavLink，在路由路径后加上目标元素的ID作为哈希值：

const Navbar = () => {
  return (
    <div>
       <NavLink to='/Contacts#3rdDiv'>Contacts</NavLink>
    </div>
  )
  // ...
}

2. 在Contacts组件中监听路由哈希，触发滚动 #

使用react-router-dom的useLocation钩子获取当前路由的哈希值，结合useEffect和useRef实现滚动定位：

import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

const Contacts = () => {
  // 给目标div创建ref
  const thirdDivRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // 提取哈希值中的目标ID（去掉开头的#）
    const targetId = location.hash.slice(1);
    if (targetId === '3rdDiv' && thirdDivRef.current) {
      // 滚动到目标元素
      thirdDivRef.current.scrollIntoView({
        behavior: 'smooth', // 可选：开启平滑滚动，不需要可设为'auto'
        block: 'start' // 可选：控制元素与视口的对齐方式
      });
    }
  }, [location.hash]); // 监听哈希值变化

  return(
    <>
      <div id={'1stDiv'} >First Div</div>
      <div id={'2ndDiv'} >Second Div</div>
      <div id={'3rdDiv'} ref={thirdDivRef} >Third Div</div>
    </>
  )
  // ...
}

额外说明 #

• 如果不需要平滑滚动，直接移除behavior: 'smooth'即可，默认是瞬间定位。
• 这种方式同时支持两种场景：从导航链接跳转，以及直接访问带哈希的URL（比如刷新页面）。
• 若需要支持多个锚点，可以扩展逻辑，根据不同的targetId定位到对应的元素。

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