React应用中页面加载时导航至特定锚点（Hash）的实现教程

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

// 假设这是你的App组件，包含NavBar, Home, Contact等
class App extends Component {
  componentDidMount() {
    // 获取URL中的哈希值，例如 "#contact"
    const urlHash = window.location.hash;

    // 检查哈希值是否存在且长度大于1（即不是空的#）
    if (urlHash.length > 1) {
      // 提取元素ID，去除开头的"#"
      const elementId = urlHash.substring(1);
      // 根据ID获取对应的DOM元素
      const element = document.getElementById(elementId);

      // 如果元素存在，则滚动到该元素
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        // 也可以选择更简单的 element.scrollIntoView();
      }
    }
  }

  render() {
    return (
      <div className="App">
        {/* 导航栏等 */}
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#contact">Contact Us</a></li>
          </ul>
        </nav>

        {/* 页面内容区域 */}
        <section id="home" style={{ height: '800px', background: '#f0f0f0', padding: '20px' }}>
          <h2>Home Section</h2>
          <p>This is the home section content.</p>
        </section>

        <section id="contact" style={{ height: '600px', background: '#e0e0e0', padding: '20px' }}>
          <h2>Contact Section</h2>
          <p>You can find our contact information here.</p>
        </section>
      </div>
    );
  }
}

// 你的根组件或路由配置
const Root = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      {/* 其他路由 */}
    </Routes>
  </BrowserRouter>
);

export default Root;

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

// 假设这是你的App组件
const App = () => {
  useEffect(() => {
    const urlHash = window.location.hash;

    if (urlHash.length > 1) {
      const elementId = urlHash.substring(1);
      const element = document.getElementById(elementId);

      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }, []); // 空依赖数组表示只在组件挂载时运行一次

  return (
    <div className="App">
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#contact">Contact Us</a></li>
        </ul>
      </nav>

      <section id="home" style={{ height: '800px', background: '#f0f0f0', padding: '20px' }}>
        <h2>Home Section</h2>
        <p>This is the home section content.</p>
      </section>

      <section id="contact" style={{ height: '600px', background: '#e0e0e0', padding: '20px' }}>
        <h2>Contact Section</h2>
        <p>You can find our contact information here.</p>
      </section>
    </div>
  );
};

const Root = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
  </BrowserRouter>
);

export default Root;