在 react-router 4 中使用锚标签

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

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

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

Answer 1

这是 react 路由器的一个已知问题。 (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 2

要向下滚动到您的锚标记，您需要安装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 3

如果您只有几个可预测的锚链接，实现正常行为的最简单方法是手动 scrollIntoView() 元素如果您在 Window.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>
        );
    }
}

检查Element.scrollIntoView() 和React refs。

Answer 4

类似于@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 5

你可以将一个对象传递给 Link，像这样

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

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

Answer 6

我使用的是 Gatsby，我的解决方案是使用 @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>

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