在React Router应用中实现页面加载时的锚点（Hash）导航

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// 假设这是你的根组件
class App extends React.Component {
  componentDidMount() {
    // 获取当前URL的哈希值，例如 "#contact"
    const urlHash = window.location.hash;

    // 检查哈希值是否存在且不为空
    if (urlHash.length > 0) {
      // 移除哈希值前面的 '#' 字符，获取纯粹的元素ID
      const elementId = urlHash.substring(1);
      // 根据ID获取对应的DOM元素
      const element = document.getElementById(elementId);

      // 如果元素存在，则滚动到该元素
      if (element) {
        // 使用 scrollIntoView() 方法进行滚动
        // behavior: 'smooth' 可以提供平滑的滚动效果
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }

  render() {
    return (
      <div className="App">
        {/* 导航栏 */}
        <NavBar />
        {/* 主页内容 */}
        <Home />
        {/* 联系我们区域，带有ID以便锚点定位 */}
        <div id="contact" className="Contact" style={{ height: '800px', background: '#f0f0f0', padding: '20px', marginTop: '20px' }}>
          <h2>联系我们</h2>
          <p>这是联系信息区域的示例内容。</p>
          <p>请填写以下表格与我们取得联系。</p>
        </div>
        {/* 其他组件 */}
      </div>
    );
  }
}

// 你的应用入口
function Root() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        {/* 其他路由 */}
      </Routes>
    </BrowserRouter>
  );
}

// 示例组件（用于演示结构）
function NavBar() { return <nav style={{ height: '60px', background: '#eee' }}>导航栏</nav>; }
function Home() { return <div style={{ height: '500px', background: '#ddd' }}>主页内容</div>; }
function Contact() { return null; /* 实际内容已移到App组件内部的div */ }

export default Root;

import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';

// 你的根组件
function App() {
  const location = useLocation(); // 使用 useLocation 钩子获取当前路由位置信息

  useEffect(() => {
    // 检查 location 对象中是否存在 hash
    if (location.hash) {
      // 移除 '#' 字符，获取纯粹的元素ID
      const elementId = location.hash.substring(1);
      // 根据ID获取对应的DOM元素
      const element = document.getElementById(elementId);

      // 如果元素存在，则滚动到该元素
      if (element) {
        // 为了确保DOM元素完全渲染并布局稳定，可以添加一个小的延迟
        // 这对于某些动态加载或复杂布局的元素尤其有用
        setTimeout(() => {
          element.scrollIntoView({ behavior: 'smooth' });
        }, 100); // 100毫秒延迟
      }
    }
  }, [location]); // 依赖 location 对象，当路由信息（包括hash）变化时重新执行效果

  return (
    <div className="App">
      {/* 导航栏 */}
      <NavBar />
      {/* 主页内容 */}
      <Home />
      {/* 联系我们区域，带有ID以便锚点定位 */}
      <div id="contact" className="Contact" style={{ height: '800px', background: '#f0f0f0', padding: '20px', marginTop: '20px' }}>
        <h2>联系我们</h2>
        <p>这是联系信息区域的示例内容。</p>
        <p>请填写以下表格与我们取得联系。</p>
      </div>
      {/* 其他组件 */}
    </div>
  );
}

// 你的应用入口
function Root() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        {/* 其他路由 */}
      </Routes>
    </BrowserRouter>
  );
}

// 示例组件（用于演示结构）
function NavBar() { return <nav style={{ height: '60px', background: '#eee' }}>导航栏</nav>; }
function Home() { return <div style={{ height: '500px', background: '#ddd' }}>主页内容</div>; }
function Contact() { return null; /* 实际内容已移到App组件内部的div */ }

export default Root;