Question

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

我正在使用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>
...

某些路线：

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>
          ...

当我点击navebar中的锚链接时，我可以在url和我的redux商店中看到哈希锚标记，它确实导航到新路由，但它不会向下滚动到标记本身。

由我来创建滚动功能或它应该如何正常工作？

Answer 1

要向下滚动到锚标记，您需要安装React Router Hash Link，其中包含：

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

然后导入哈希链接：

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

然后使用Hash Link，例如：

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

并在目标组件中，例如：

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

Answer 2

反应路由器是一个已知问题。（https://github.com/ReactTraining/react-router/issues/394#issuecomment-220221604）

也有解决方案。 https://www.npmjs.com/package/react-router-hash-link这个包解决了这个问题。

您必须使用此Hash Link作为Link，如下所示。

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

Answer 3

如果只有很少的可预测锚点链接，则实现正常行为的最简单方法是手动scrollIntoView()元素，前提是Window.location.href中有预期的锚点标签。

full explanation。

class Page extends react.Component {
    componentDidMount() {
        if (this.$ref && location.href.includes('#my-ref')) {
            this.$ref.scrollIntoView({
                // optional params
                behaviour: '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>
        );
    }
}

选中Element.scrollIntoView()和React refs。

Answer 4

您可以像这样将对象传递给Link

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

参考https://reacttraining.com/react-router/web/api/Link

Answer 5

类似于@filippo，但带有React钩子和一些Typescript。

    import React, { Functioncomponent, useEffect, useRef } from 'react';
    import { useLocation } from 'react-router-dom';
    
    const MyFunc: FunctionComponent = () => {
    const myRef = useRef<null | HTMLDivElement>(null);
    
        useEffect(() => { 
    if (myRef && location.hash.includes('#my-ref')) { 
    
    myRef?.current?.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'center'
    });
    
    }
    }, [myRef, location.hash]);
    
    return (
    <div> Some stuff before </div>
    <div ref={myRef}> Scroll to me </div>
    <div> Some stuff after </div>
    )
    
    } 
       
        export default MyFunc;

Answer 6

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

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

Link to Gatsby documentation。

Answer 7

在锚标记中使用哈希片段的另一种方法是查询 DOM 并使用 scrollIntoView() 作为 onClick 事件的一部分。

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

...

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

当窗口位置用哈希地址更新时，这只是绕过路由器刷新页面。

在react-router 4中使用锚标签

7 个答案: