React Router Hash Link对我有用，并且易于安装和实现：

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

在您的 component.js 中将其作为链接导入：

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

而不是使用锚点<a>，使用<Link> ：

<Link to="home-page#section-three">Section three</Link>

注意：我使用HashRouter而不是Router：

这是我找到的一种解决方案（2016 年 10 月）。它是跨浏览器兼容的（在 Internet Explorer、Firefox、Chrome、移动 Safari 和Safari 中测试）。

您可以为onUpdate路由器提供一个属性。任何时候路由更新时都会调用它。该解决方案使用onUpdate属性检查是否存在与哈希匹配的 DOM 元素，然后在路由转换完成后滚动到该元素。

您必须使用 browserHistory 而不是 hashHistory。

答案是哈希链接 #394 中的“Rafrax” 。

将此代码添加到您定义的位置<Router>：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

const routes = (
  // your routes
);

function hashLinkScroll() {
  const { hash } = window.location;
  if (hash !== '') {
    // Push onto callback queue so it runs after the DOM is updated,
    // this is required when navigating from a different page so that
    // the element is rendered on the page before trying to getElementById.
    setTimeout(() => {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) element.scrollIntoView();
    }, 0);
  }
}

render(
  <Router
    history={browserHistory}
    routes={routes}
    onUpdate={hashLinkScroll}
  />,
  document.getElementById('root')
)

如果您感到懒惰并且不想复制该代码，您可以使用 Anchorate，它只是为您定义了该函数。https://github.com/adjohnson916/anchorate

这是一个不需要任何订阅或第三方软件包的简单解决方案。它应该与react-router@3和一起使用和react-router-dom。

工作示例：https : //fglet.codesandbox.io/

来源（不幸的是，它目前在编辑器中不起作用）：

#ScrollHandler 钩子示例

import { useEffect } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";

const ScrollHandler = ({ location, children }) => {
  useEffect(
    () => {
      const element = document.getElementById(location.hash.replace("#", ""));

      setTimeout(() => {
        window.scrollTo({
          behavior: element ? "smooth" : "auto",
          top: element ? element.offsetTop : 0
        });
      }, 100);
    }, [location]);
  );

  return children;
};

ScrollHandler.propTypes = {
  children: PropTypes.node.isRequired,
  location: PropTypes.shape({
    hash: PropTypes.string,
  }).isRequired
};

export default withRouter(ScrollHandler);

#ScrollHandler 类示例

import { PureComponent } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";

class ScrollHandler extends PureComponent {
  componentDidMount = () => this.handleScroll();

  componentDidUpdate = prevProps => {
    const { location: { pathname, hash } } = this.props;
    if (
      pathname !== prevProps.location.pathname ||
      hash !== prevProps.location.hash
    ) {
      this.handleScroll();
    }
  };

  handleScroll = () => {
    const { location: { hash } } = this.props;
    const element = document.getElementById(hash.replace("#", ""));

    setTimeout(() => {
      window.scrollTo({
        behavior: element ? "smooth" : "auto",
        top: element ? element.offsetTop : 0
      });
    }, 100);
  };

  render = () => this.props.children;
};

ScrollHandler.propTypes = {
  children: PropTypes.node.isRequired,
  location: PropTypes.shape({
    hash: PropTypes.string,
    pathname: PropTypes.string,
  })
};

export default withRouter(ScrollHandler);

此解决方案适用于 react-router v5

import React, { useEffect } from 'react'
import { Route, Switch, useLocation } from 'react-router-dom'

export default function App() {
  const { pathname, hash, key } = useLocation();

  useEffect(() => {
    // if not a hash link, scroll to top
    if (hash === '') {
      window.scrollTo(0, 0);
    }
    // else scroll to id
    else {
      setTimeout(() => {
        const id = hash.replace('#', '');
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView();
        }
      }, 0);
    }
  }, [pathname, hash, key]); // do this on route change

  return (
      <Switch>
        <Route exact path="/" component={Home} />
        .
        .
      </Switch>
  )
}

在组件中

<Link to="/#home"> Home </Link>

只是避免使用 react-router 进行本地滚动：

document.getElementById('myElementSomewhere').scrollIntoView()