在React Router应用中实现页面加载时URL哈希锚点导航

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) {
        element.scrollIntoView({
          behavior: 'smooth' // 可选：添加平滑滚动效果
        });
      }
    }
  }

  render() {
    return (
      <div className="App">
        {/* 导航栏等其他组件 */}
        <NavBar /> 
        <Home />
        {/* 目标锚点元素，例如： */}
        <div id="contact" className="Contact">
          <h2>联系我们</h2>
          <p>这里是联系方式内容。</p>
        </div>
        {/* 其他页面内容 */}
      </div>
    );
  }
}

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

export default Root;

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

// 假设这是你的主应用组件
function App() {
  useEffect(() => {
    const urlHash = window.location.hash;
    if (urlHash.length > 0) {
      const elementId = urlHash.substring(1);
      const element = document.getElementById(elementId);
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth'
        });
      }
    }
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <div className="App">
      <NavBar />
      <Home />
      <div id="contact" className="Contact">
        <h2>联系我们</h2>
        <p>这里是联系方式内容。</p>
      </div>
    </div>
  );
}

// 你的路由配置
function Root() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Root;