如何在反应/预演中使用锚标记导航到页面的特定部分答案

【问题标题】：How to use anchor tag to navigate to particular section of page in react/preact如何在反应/预演中使用锚标记导航到页面的特定部分
【发布时间】：2019-02-26 09:34:36
【问题描述】：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#id1">Home</a></li>
  <li><a href="#id2">AnotherMenu</a></li>
  <li><a href="#id3">AnotherMenuToo</a></li>
</ul>

<div id="id1">
<someReactComponent></someReactComponent>
</div>

<div id="id3">
<someAnotherReactComponent></someAnotherReactComponent>
</div>

<div id="id2">
<someAnotherReactComponent></someAnotherReactComponent>
</div>


</body>
</html>

我在一个页面中有多个 react/preact 组件。我想使用锚标签导航到特定部分。目前我通过使用点击处理程序并使用scrollTo（）导航来做到这一点。但我需要使用 scrollspy 功能，所以我必须以 classis 方式使用它。但是当我尝试使用 href=#id 导航时，它显示 Cannot GET the requested resource 。请帮帮我。

这都是因为我需要在我的 react/preact 项目中实现滚动间谍

请帮帮我。

【问题讨论】：

分享你的代码，这样更容易给出解决方案。
你想导航的地方添加并且当你想去它时使用如果它不起作用。尝试将“#”移到另一个。
@VarunTheFalcon 添加了原型。它有点像。如果需要更多信息，请告诉我
@Pute 不幸的是它不起作用。

标签： javascript reactjs preact

【解决方案1】：

我们只需要在<a>标签中定义<div>name属性

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#id1">Home</a></li>
  <li><a href="#id2">AnotherMenu</a></li>
  <li><a href="#id3">AnotherMenuToo</a></li>
</ul>

<a name="#id1">
    <div id="id1">
       <someReactComponent></someReactComponent>
    </div>
</a>

<a name="#id3">
    <div id="id3">
       <someReactComponent></someReactComponent>
    </div>
</a>

<a name="#id2">
    <div id="id2">
       <someReactComponent></someReactComponent>
    </div>
</a>
</body>
</html>

【讨论】：

Basnal，感谢您抽出宝贵时间帮助我。它在那里滚动了一小部分时间。但随后导航离开并再次显示无法获取任何资源。
@avisek1269 请尝试执行更新后的代码。
同样的问题。实际上它更新了网址。我的意思是将 url 更新为 sample.html#id1 然后问题就来了。