如何在React中实现跨页面板块的锚点跳转？能否使用ID实现该功能？

当然可以用ID来实现这种锚点跳转！不过因为你用的是React Router，默认情况下路由跳转后不会自动滚动到锚点位置，所以需要做一点点额外处理，下面是具体的实现步骤：

1. 确保目标组件的ID与Link的Hash完全匹配 #

你已经在HomeService的Link里写了对应的hash：/logistics#transport、/logistics#air、/logistics#ocean，所以需要保证Logistics页面里的三个组件都有对应的ID：

• Ground组件的根元素需要加上id="transport"（和你Link里的#transport对应）
• Air组件已经有id="air"，没问题
• Sea组件的根元素需要加上id="ocean"（和你Link里的#ocean对应）

比如Ground组件的结构应该是这样的：

// Ground组件示例
import React from 'react';
import './Ground.css';

const Ground = () => {
  return (
    <div className="ground" id="transport">
      {/* 组件内容 */}
    </div>
  );
};

export default Ground;

2. 处理React Router的锚点滚动问题 #

React Router默认不会在路由跳转后自动滚动到锚点，所以我们需要手动实现这个逻辑。这里有两种常用方案：

方案一：在Logistics页面中监听路由变化并滚动 #

使用useLocation钩子监听路由的hash变化，然后找到对应元素并滚动过去：

// 更新后的Logistics组件
import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import Ground from './Ground';
import Air from './Air';
import Sea from './Sea';
import './Logistics.css';

const Logistics = () => {
  const location = useLocation();

  useEffect(() => {
    // 检查当前路由是否有hash值
    if (location.hash) {
      const targetElement = document.querySelector(location.hash);
      if (targetElement) {
        // 滚动到目标元素，可选smooth参数实现平滑滚动
        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    } else {
      // 如果没有hash，默认滚动到页面顶部
      window.scrollTo(0, 0);
    }
  }, [location]); // 当location变化时触发

  return (
    <div className="logistics-page">
      <Ground />
      <Air />
      <Sea />
    </div>
  );
};

export default Logistics;

方案二：配置路由器的滚动恢复（React Router v6.4+适用） #

如果你用的是createBrowserRouter（v6.4及以上版本），可以直接在路由器配置里开启scrollRestoration，让浏览器自动处理锚点滚动：

// 路由配置文件（比如src/router.js）
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomeService from './components/HomeService';
import Logistics from './components/Logistics';

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <HomeService />,
    },
    {
      path: '/logistics',
      element: <Logistics />,
    },
  ],
  {
    scrollRestoration: 'auto',
  }
);

export default function App() {
  return <RouterProvider router={router} />;
}

3. 额外优化（可选） #

如果你的页面有固定导航栏，可能会出现锚点元素被导航栏遮挡的情况。这时可以给目标组件的根元素添加足够的padding-top，或者调整scrollIntoView的block参数为'center'来避开导航栏。

这样配置完成后，点击HomeService里的三个卡片，就能准确跳转到Logistics页面对应的板块了！

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