React中如何从其他页面跳转至首页指定组件？

问题根源 #

你当前的导航链接只写了锚点（比如#testimonials），在非首页页面时，当前DOM里根本没有对应id的元素，自然无法跳转。必须先跳回首页，再定位到目标锚点。

解决步骤 #

1. 修改导航链接的目标路径
   把导航里的Link目标改成「首页路由 + 锚点」，如果首页路由是根路径/，就写成：

   <Nav.Link className='navoption'>
     <Link to='/#testimonials' smooth>
       Testimonals
     </Link>
   </Nav.Link>
   
   <Nav.Link className='navoption'>
     <Link to='/#faq' smooth>
       Faq
     </Link>
   </Nav.Link>
   

   如果首页路由是/home，就换成to='/home#testimonials'。这样不管在哪个页面点击，都会先跳转到首页，再尝试定位锚点。

2. 强制实现锚点平滑滚动
   有时候React Router跳转后不会自动触发滚动，需要在首页组件里添加逻辑处理：
   先导入所需钩子：

   import { useLocation } from 'react-router-dom';
   import { useEffect } from 'react';
   

   然后在首页组件内添加滚动监听：

   const Home = () => {
     const location = useLocation();
   
     useEffect(() => {
       // 提取锚点ID（去掉前面的#）
       const targetId = location.hash.slice(1);
       if (targetId) {
         const targetElement = document.getElementById(targetId);
         if (targetElement) {
           // 平滑滚动到目标组件
           targetElement.scrollIntoView({ behavior: 'smooth' });
         }
       }
     }, [location]);
   
     // 首页原有代码...
   };
   

3. 确认路由配置匹配
   检查路由配置，确保首页的路径和导航里写的一致，比如：

   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/about" element={<AboutUs />} />
     <Route path="/contact" element={<Contact />} />
   </Routes>
   

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