使用 React 组件内的 标签进行锚定导航

我正在尝试在我的反应应用程序内的页面组件之一中设置锚点导航。

我正在尝试模仿所看到的相同功能在 Draft.js 上 https://draftjs.org/docs/getting-started#installation它使用子标题作为锚点（旁边有链接图标），这也反映在 URL 中。

作为参考，我正在查看http://www.tagindex.net/html/link/a_name.html http://www.tagindex.net/html/link/a_name.html

所以我继续尝试使用name属性

  <List.Item>
    <a href="#createqueryschema">Create Query Schema</a>
  </List.Item>

然后是它应该跳转到的副标题

<Header>
  <a name="createqueryschema">Create Query Schema</a>
  <Header.Subheader style={{ marginTop: "20px", fontSize: "1rem" }}>
    BLAH BLAH BLAH BLAH BLAH BLAH
  </Header.Subheader>
</Header>

我正在名为的页面上呈现此列表和子标题/overview，所以理论上当我点击列表中的项目时它应该跳转到Create Query Schema副标题并反映/overview#createqueryschema在网址中。

但是，它正在尝试导航到页面/createqueryschema。我不确定为什么/如何尝试导航到新页面，而它应该只是附加 # 和name属性。

编辑：它也没有跳转到所需的元素

我有一个代码沙箱 https://codesandbox.io/s/zk0970zypl设置进一步解释。单击菜单栏顶部的文档，这将带您进入带有锚点导航的页面。如果单击下面的两个锚点中的任何一个Overview然后相应的部分<Header>没有滚动到。

EDIT: 更新以更好地解释路由问题

我在为同一页面导航设置锚元素时仍然遇到一些问题。 我的应用程序已经出于另一个原因使用哈希路由器，所以我的基本页面/home/#/其他页面看起来像这样/home/#/page1 /home/#/page2

例如，我正在使用页内锚点导航page2我正在创建一个指向下面指定锚点的链接

   <List.Item>
    <a href="#some-random-header">Random Header</a>
  </List.Item>

然后使用创建命名锚点id属性<Header id="some-random-header">Random Header Section</Header>

当我单击链接时，它会尝试导航到带有 url 的新页面/home/#/some-random-header代替/home/#/page2#some-random-header

通常 # 用于 Id，但是在 React 中不使用 id。你能做的就是创建一个参考。然后您可以创建一个方法 onClick 以在单击 ref 时滚动到 ref

所以你可以尝试这样的事情：

import React, { useRef } from "react";

const Component = () => {
   const myRef = useRef();
   const handleClick = () => {
      window.scrollTo(0, myRef.current.offsetTop)
   }
   return ( 
      <>
      <List.Item>
         <p onClick={handleClick}>Create Query Schema</p>
      </List.Item>
      <div name="createqueryschema" ref={myRef} >Create Query Schema</div> 
      </>
)

}