在React Router应用中实现页面加载时自动滚动到指定锚点

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

// 假设这是你的App组件
class App extends Component {
  componentDidMount() {
    // 获取URL中的哈希片段（例如，"#contact"）
    const urlHash = window.location.hash;

    // 检查哈希是否存在且非空
    if (urlHash.length > 0) {
      // 移除哈希前的"#"，获取元素ID（例如，"contact"）
      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 />
        <Contact /> {/* 假设Contact组件内部有一个id="contact"的元素 */}
      </div>
    );
  }
}

// Contact组件示例
const Contact = () => {
  return (
    <div id="contact" className="Contact">
      <h2>联系我们</h2>
      <p>这是联系我们区域的内容。</p>
    </div>
  );
};

// Home组件示例
const Home = () => {
  return (
    <div className="Home" style={{ height: '800px', background: '#f0f0f0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <h1>首页内容</h1>
    </div>
  );
};

// NavBar组件示例
const NavBar = () => {
  return (
    <nav style={{ padding: '20px', background: '#eee' }}>
      <a href="#home" style={{ marginRight: '15px' }}>首页</a>
      <a href="#contact">联系我们</a>
    </nav>
  );
};

// 你的根组件
const Root = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Root;

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

// 假设这是你的App组件
const App = () => {
  const location = useLocation(); // 获取当前路由信息

  useEffect(() => {
    // location.hash 包含了URL的哈希片段
    const urlHash = location.hash; 

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

      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [location.hash]); // 依赖项为location.hash，确保在哈希变化时也能触发

  return (
    <div className="App">
      <NavBar />
      <Home />
      <Contact /> {/* 假设Contact组件内部有一个id="contact"的元素 */}
    </div>
  );
};

// Contact组件示例 (同上)
const Contact = () => {
  return (
    <div id="contact" className="Contact">
      <h2>联系我们</h2>
      <p>这是联系我们区域的内容。</p>
    </div>
  );
};

// Home组件示例 (同上)
const Home = () => {
  return (
    <div className="Home" style={{ height: '800px', background: '#f0f0f0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <h1>首页内容</h1>
    </div>
  );
};

// NavBar组件示例 (同上)
const NavBar = () => {
  return (
    <nav style={{ padding: '20px', background: '#eee' }}>
      <a href="#home" style={{ marginRight: '15px' }}>首页</a>
      <a href="#contact">联系我们</a>
    </nav>
  );
};

// 你的根组件
const Root = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Root;