使用 React router dom 滚动到新页面上的特定 div

Question

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

我的代码如下：App.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

Answer 1

截至github 上的这个问题，使用react-router-hash-link包。

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

这是代码和框