reactjs - 如何在react中跳转到具有特定id的div

Question

我有一个函数，用于检查页面上是否存在 url 路径名中提供的 id 字符串，如果存在，我想跳转到页面上的该 div。我已经能够检查 id 是否存在，但我找不到从 React 中的函数跳转到 id 的方法。我尝试使用react-router-hash-link，但我看不到一种方法来完成这项工作，我也尝试过这个......

const navigate = useNavigate()

const func = id_string => { 
  navigate('#' + id_string)
}

这并没有像我希望的那样跳转到相关的 div，有人知道如何实现这个功能吗？

Answer 1

您可以使用纯 JavaScript 来完成此操作

const func = id_string => { 
 document.querySelector(`#${id_string}`).scrollIntoView()
}

实际上，您可以在 useEffect 中执行此操作，因此您可以在页面加载后立即滚动

useEffect(() => {
  // get id from URL
  const id = ....

  document.querySelector(`#${id}`).scrollIntoView()
}, [])