Javascript 在react router 4中使用锚定标记

当用户通过锚链接导航到该页面时，我希望该页面向下滚动到我的锚标记

我使用的是react router 4，我定义如下：

导航栏：

export default (props) => {
  const { 
    updateModal,
    updateRoute,
  } = props
  return(
    <Navbar fluid collapseOnSelect>
      <Nav>
        <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret>
          <MenuItem eventKey="4.1">
             <Link to='/solution#ipos'>TESTING ANCHOR</Link>
          </MenuItem>
...

导出默认值（道具）=>{
常数{
更新模板，
updateRoute，
}=道具
返回(
测试锚
...

一些路线：

export default class extends Component {
  constructor() {
    super()
    this.state = {
      isLoading: true
    }
  }
  render() {
    return (
      <Grid className='solutions' fluid>
       <Row className='someClass'>
        <div>
          <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2>
          ...

导出默认类扩展组件{
构造函数（）{
超级（）
此.state={
孤岛加载：正确
}
}
render（）{
返回(
...

当我单击导航栏中的锚链接时，我可以在url和我的redux存储中看到散列锚标记，它确实会导航到新路由，但不会向下滚动到标记本身

---

是否由我来创建滚动功能，或者它应该如何准确工作？

这是react路由器的一个已知问题。（）

还有一个解决方案。这个包解决了这个问题

您必须使用此

哈希链接

作为

链接

，如下所示

---

从'react router hash Link'导入{HashLink as Link}；

要向下滚动到锚定标记，您需要安装react router hash Link，包括：

npm install --save react-router-hash-link

然后导入哈希链接：

import { HashLink as Link } from 'react-router-hash-link';

然后使用哈希链接，例如：

<Link to="/pathLink#yourAnchorTag">Your link text</Link>

<div id= "yourAnchorTag">
      <p>Linked to here<p>
</div>

您的链接文本

在目标组件处，例如：

<Link to="/pathLink#yourAnchorTag">Your link text</Link>

<div id= "yourAnchorTag">
      <p>Linked to here<p>
</div>

链接到此处

如果您只有少量可预测的锚定链接，那么实现正常行为的最简单方法是手动

滚动查看（）

，如果您在

窗口.location.href中有预期的锚定标记

class Page extends react.Component {
    componentDidMount() {
        if (this.$ref && location.href.includes('#my-ref')) {
            this.$ref.scrollIntoView({
                // optional params
                behavior: 'smooth',
                block: 'start',
                inline: 'center',
            });
        }
    }

     render() {
        return (
            // This is the div you want to scroll to
            <div ref={ref => {
                this.$ref = ref;
            }}>
                Other content
            </div>
        );
    }
}

类页扩展react.Component{
componentDidMount（）{
if（此.$ref&&location.href.包括（“#我的ref”））{
此.$ref.scrollIntoView({
//可选参数
行为：“平滑”，
块：“开始”，
内联：'中心'，
});
}
}
render（）{
返回(
//这是您要滚动到的div
{
这.$ref=ref；
}}>
其他内容
);
}
}

与@filippo类似，但带有React钩子和一点打字脚本


import React，{Functioncomponent，useffect，useRef}从'React'导入；
从'react router dom'导入{useLocation}；
const MyFunc:FunctionComponent=（）=>{
const myRef=useRef（null）；
useffect（（）=>{
if（myRef&&location.hash.includes（'#my ref'））{
myRef？.current？.scrollIntoView({
行为：“平滑”，
块：“开始”，
内联：“中心”
});
}
}，[myRef，location.hash]）；
返回(
以前有些东西
滚动到我这里
一些东西
)
} 
导出默认MyFunc；
您可以将对象传递给链接，如下所示

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>



参考
我使用的是盖茨比，我的解决方案是使用
@reach/router
格式：

import { navigate } from '@reach/router';
navigate('#some-link');


function handleClick(evt) {
  ...
  document.querySelector('[id="label-input-1"]').scrollIntoView();
}

...

<a href={''} onClick={e => handleClick(e)}>Foo</a>


功能手柄点击（evt）{
...
document.querySelector（'[id=“label-input-1”]'）。scrollIntoView（）；
}
...

当窗口位置用哈希地址更新时，这只是绕过了刷新页面的路由器。
很难相信在这个包之外还没有更普遍的做法。看起来真的很奇怪。在2020年2月的报道中，这仍然是最好的方式（遗憾地）实际上，我甚至无法让它按预期运行。这个框架有时会让人失望。我有一个静态ID永远不会更改的元素，我只想添加一个a[href=“#myAnchor”]然后滚动到它。如果没有至少20行代码，这似乎是不可能的。我还感兴趣的是，这个SO答案是唯一一个提供了如何编写链接内容示例的答案。谢谢@AdrianI用
，
，和
搞乱了，非常有用，谢谢。一个小corre但是操作。参数
行为
应该是
行为
；）这很有帮助。