routes v6 react-router-dom 在单页应用上启用垂直滚动答案

【问题标题】：routesv6 react-router-dom Enable vertical scrolling on a single page approutes v6 react-router-dom 在单页应用上启用垂直滚动
【发布时间】：2022-10-23 00:53:23
【问题描述】：

在 App.js 文件中，我有一个网页组件。通过组件在页面上的垂直滚动工作正常：

  function App() {
       return (
  <div className="App">
  <Navigation/>
  <About/>
  <Statement/>
  <Contact/>
  </div>
  );
}

当我把路由器放在上面时，垂直滚动是不可能的，只有一个基于“/”链接（路径）的组件是可见的，我无法滚动页面。如何启用页面的垂直滚动？

     function App() {
       return (
       <div className="App">
      <Routes>
          <Route path="/" element={<Navigate to="home"/>} />
          <Route path="/home" element={<Navigation />} />
          <Route path="/about" element={<About />} />
          <Route path="/statements" element={<Statement />} />
          <Route path="contact" element={<Contact />} />
      </Routes>
  </div>
  );
}

【问题讨论】：

然后只需使用哈希 - <a href="#home"> 将滚动到 <div id="home"> ^^

标签： reactjs react-router react-router-dom

【解决方案1】：

根据我的理解，您希望您的应用程序将所有组件垂直显示在另一个下方。第一种方法是成功的，因为您只是一个接一个地渲染内容。

但是当您使用路由时，这是无法实现的，因为它有助于在应用程序中定义多个路由。当用户在浏览器中键入一个特定的 URL 时，如果这个 URL 路径与路由器内的任何“路由”匹配，则用户将被重定向到该特定路由。因此，您只能看到一个组件。

这可以简单地通过将你的东西保持在第一种方式并将 id 引入所有组件 div 来实现。然后在导航组件中引用这些 id。例子：

function App() {
  return (
    <div className="App">
      <Navigation />
      <About />
      <Statement />
      <Contact />
    </div>
  );
}
function Navigation() {
  return (
    <div>
      <a href="#about">About</a>
    </div>
  );
}
function About() {
  return <div id="about">About this</div>;
}

【讨论】：

【解决方案2】：

反应路由器哈希链接

【讨论】：