React中如何跳转至其他页面的指定div并滚动定位？

针对你的React项目场景，有两种简单可行的实现方式：

方法一：通过URL锚点参数实现 #

1. 修改返回按钮的跳转链接：在Page Two页面的返回按钮中，给主页面URL添加锚点参数，指向目标div的id：

   <Link to="/#section-four">返回并定位到Section Four</Link>
   

2. 主页面处理滚动逻辑：在主页面组件中，监听组件挂载或路由变化，检查URL的hash值并滚动到对应元素：

   import { useEffect } from 'react';
   
   function MainPage() {
     useEffect(() => {
       const targetId = window.location.hash.slice(1); // 移除hash开头的#号
       if (targetId === 'section-four') {
         const targetElement = document.getElementById(targetId);
         if (targetElement) {
           targetElement.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动，可选
         }
       }
     }, []);
   
     // 页面其他内容...
   }
   

方法二：通过React Router的state传递目标ID #

1. 跳转时携带目标ID的state：在返回按钮的跳转链接中，通过state属性传递需要定位的元素id：

   <Link to="/" state={{ targetId: 'section-four' }}>返回并定位到Section Four</Link>
   

2. 主页面读取state并执行滚动：在主页面中通过useLocation钩子获取路由state，在组件挂载或state变化时执行滚动：

   import { useEffect } from 'react';
   import { useLocation } from 'react-router-dom';
   
   function MainPage() {
     const location = useLocation();
   
     useEffect(() => {
       const targetId = location.state?.targetId;
       if (targetId) {
         const targetElement = document.getElementById(targetId);
         if (targetElement) {
           targetElement.scrollIntoView({ behavior: 'smooth' });
           // 可选：清除路由state，避免页面刷新后重复触发滚动
           window.history.replaceState({}, document.title);
         }
       }
     }, [location.state]);
   
     // 页面其他内容...
   }
   

两种方法对比 #

• URL锚点法：优势是支持直接分享定位链接，他人打开也能自动定位；缺点是URL会显示锚点参数。
• state传递法：优势是URL更简洁，不会暴露定位目标；缺点是页面刷新后路由state会丢失，无法保留定位状态。

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