routesv6 react-router-dom 在单页应用上启用垂直滚动

Question

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

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

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

     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>
  );
}

Answer 1

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

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

这可以简单地通过保持你的东西第一种方式并将 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>;
}

routesv6 react-router-dom 在单页应用上启用垂直滚动

routesv6 react-router-dom Enable vertical scrolling on a single page app

reactjs

react-router

react-router-dom