使用 react router dom 滚动到新页面上的特定 div答案

【问题标题】：Scroll to a specific div on a new page using react router dom使用 react router dom 滚动到新页面上的特定 div
【发布时间】：2021-02-20 22:07:30
【问题描述】：

我目前在我的反应应用程序中使用反应路由器 dom 进行路由。我正在尝试使用来自反应路由器 dom 的链接滚动到另一个页面上的特定 div。我遇到的问题是页面发生了变化，但它没有滚动到我指定的 div 的 id。我不确定我错过了什么。

我的代码如下：应用.js

import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

import Home from "./Home";
import PageTwo from "./PageTwo";
import "./styles.css";
function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/pagetwo" component={PageTwo} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Home Page

import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <div>Navigate to div on new page</div>
      <Link to="/pagetwo#div">Home</Link>
    </div>
  );
};

export default Home;

第二页：

const PageTwo = () => {
  return (
    <div>
      <div style={{ marginTop: 500 }} id="div">
        Page Two Div
      </div>
    </div>
  );
};

export default PageTwo;

css:

html {
  scroll-behavior: smooth;
}

附件是用于调试的代码沙箱！ https://codesandbox.io/s/silent-hill-0ln79?file=/src/PageTwo.js:0-171

【问题讨论】：

假设滚动的代码在哪里？
如果我要在路由旁边的 url 中键入要滚动到的 div 的 id，它将带我到那个确切的 div，由于某种原因，当我使用链接或导航链接等时反应路由器 dom 它不起作用
github.com/ReactTraining/react-router/issues/…你试过这个吗？

标签： javascript reactjs react-router-dom

【解决方案1】：

从此issue on github 使用react-router-hash-link 包。

<HashLink to="/pagetwo#div">Home</HashLink>

这里是codesandbox

【讨论】：