用React Link标签导航到另一页的特定部分

Question

假设我在标题上有一个称为“联系我”的按钮。 当我单击按钮时，即使我在另一页上，它也会将我重定向到主页的联系部分。

我将如何使用React Link标签进行设置？我尝试这样使用它，

 <Link to="/#contactsec" > contact Me <Link>

它将我重定向到主页，但我不转到主页的Contactsec。

我如何做到这一点。

Answer 1

使用使用效果挂钩抓住标识符（“＃”符号之后的URL的一部分），在页面上找到具有相同ID的元素，然后在其存在的情况下平滑滚动。

useEffect(() => {
  const href = window.location.href.substring(
    window.location.href.lastIndexOf('#') + 1
  );
  const element = document.getElementById(href);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
}, []);

Answer 2

 const navigate = useNavigate();
 const navigateToContact = () => {
 navigate("/");
 setTimeout(() => {
  const contactSection = document.getElementById("contact");
  if (contactSection) {
    contactSection.scrollIntoView({ behavior: "smooth" });
  }
}, 100); // Delay for smoother scroll

};

//通过使用此方法按钮

<button onClick={navigateToContact}>Contact us</button>

，当单击按钮时，它将重定向到主页，然后将ID“触点”顺畅地滚动到该部分。

Answer 3

我不知道它是否适合您想要的用户体验，但是解决方案是在另一个选项卡中打开它，例如

＆lt; link =“/＃Contactsec” target =“ _ black”＆gt;与我联系; link＆gt;