React从其他页面返回首页指定组件的实现问题

问题分析 #

你遇到的情况是：首次从其他页面跳转回首页时，页面重新挂载但未触发锚点滚动逻辑，浏览器仅加载首页内容停在顶部；第二次点击导航时，页面已处于首页路由，浏览器识别锚点链接后自动滚动到目标元素。

解决方案 #

按以下步骤修改代码即可实现需求：

1. 给首页目标组件添加唯一ID
   修改Homepage组件，为每个需要定位的子组件添加ID，同时通过路由监听触发滚动逻辑：

   import React, { useEffect } from 'react';
   import { useLocation } from 'react-router-dom';
   import About from '../Component/About/About';
   import Contact from '../Component/Contact/Contact';
   import Home from '../Component/Home/Home';
   import Services from '../Component/Services/Services';
   import Solution from '../Component/Solution/Solution';
   import Header from '../Component/Header/Header';
   
   const Homepage = () => {
     const location = useLocation();
   
     // 监听路由hash变化，触发滚动
     useEffect(() => {
       const targetId = location.hash.slice(1); // 去掉hash中的#符号
       if (targetId) {
         const targetElement = document.getElementById(targetId);
         if (targetElement) {
           targetElement.scrollIntoView({ 
             behavior: 'smooth', // 可选：开启平滑滚动
             block: 'start' // 滚动到元素顶部位置
           });
         }
       }
     }, [location.hash]);
   
     return (
       <div>
         {/* <Header/> */}
         <Home id="home"/>
         <About id="about"/>
         <Solution id="solution"/>
         <Services id="services"/>
         <Contact id="contact"/>
       </div>
     );
   };
   
   export default Homepage;
   

2. 修改导航栏跳转链接
   确保导航栏中指向首页指定组件的链接包含锚点，比如要跳转到首页的Services组件，链接应写成：

   <Link to="/#services">回到服务板块</Link>
   

   若首页路由不是根路径/，替换为实际首页路由即可，比如/home#services。

原理说明 #

• 通过useLocation监听路由的hash变化，无论首次从其他页面跳转过来，还是在首页内切换锚点，只要hash改变就触发滚动逻辑。
• 使用scrollIntoView方法精准定位到目标元素，可配置平滑滚动效果优化用户体验。

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