使用反应组件内的 <a> 标记进行锚导航

Question

我正在尝试在我的 react 应用程序中的一个页面组件中设置锚导航。

我正在尝试模仿与 here on draft.js 相同的功能，它使用子标题作为锚点（旁边带有链接图标），这也反映在 URL 中。

作为参考，我正在查看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 子标题并在URL 中反映/overview#createqueryschema。

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

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

我有一个codesandbox 设置来进一步解释。单击菜单栏顶部的文档，这将带您进入带有锚导航的页面。如果您单击Overview 部分下的两个锚点中的任何一个，则不会滚动到相应的<Header>。

编辑：更新以更好地解释路由问题

我仍然在为同一页面导航设置锚元素时遇到一些问题。 由于另一个原因，我的应用程序已经在使用哈希路由器，所以我的基本页面 /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 INSTEAD 为 /home/#/page2#some-random-header

Answer 1

通常 # 用于 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> 
      </>
)

}