html - 在 React 组件中使用 标签定位导航

Question

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

我正在尝试模仿与 here on draft.js 相同的功能它使用子标题作为 anchor (旁边有链接图标)，这也反射(reflect)在 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副标题并反射(reflect) /overview#createqueryschema在 URL 中。

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

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

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

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

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

例如，我在 page2 上使用页内 anchor 导航我正在创建指向下面命名 anchor 的链接

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

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

当我点击链接时，它会尝试导航到一个新页面，url 为 /home/#/some-random-header代替 /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> 
      </>
)

}