使用react从URL链接到锚点

Question

我有一个常见问题解答页面，我以

的形式创建了许多问题和答案。

<div>
    <h4 id="anchor-name">question</h4>
    <p>answer</p>
</div>

如果我有一个按钮或可点击链接，其形式为

，这将按预期工作

<a href="#anchor-name">Click here to go to anchor</a>

直接将我带到具有该ID的问题（预期行为） 问题是当我尝试通过类似的操作

从另一个选项卡的URL访问此URL时

https://my-app-url/#/FAQ/#anchor-name

它将我重定向到“常见问题”页面，而不是我的问题。取而代之的是，它只加载常见问题并停留在顶部。

某些上下文：

• 前端处于反应状态
• URL https://my-app-url/#/FAQ/#anchor-name中的第一个＃是强制性的。显然，如果我只使用https://my-app-url/FAQ/#anchor-name，它将永远不会加载页面
• 我尝试用<div>标签将<h4>标签和<a>标签括起来，但是没有用。在那些情况下，我所做的是

<div>
    <a href="#anchor-name">
      <h4 id="anchor-name">question</h4>
      <p>answer</p>
    </a>
</div>

我想知道并且似乎无法通过大量研究找到的东西是：

1. 是否可以使用react-router库通过URL从外部链接访问此锚点？
2. 是否可以通过使用react html锚方法无法按预期方式工作？
3. 我网址中的第一个＃干扰了锚链接功能吗？

Answer 1

您不需要紧接/之前的最后一个#anchor-tag。

因此URL为：

https://my-app-url/#/FAQ#anchor-name

Answer 2

对于任何有兴趣的人，我已解决了此问题。通过用BrowserHistory替换HashHistory解决了该问题。使用HashHistory，URL获得一个＃来干扰锚点。通过使用BrowserHistory，＃永远不会出现，因此问题不再存在。希望这会有所帮助。