CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
yaros
yaros

Reputation: 197

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

In App.js file I have a single web page components. The vertical scrolling on the page through the components is working fine:

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

As I put the router on it, the vertical scrolling is not possible and only one component, based on the "/" link(path) is visible and I cannot scroll through the page. How to enable vertical scrolling through the page?

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

Upvotes: 0

Views: 723

Answers (1)

poo
poo

Reputation: 1230

As per my understanding, you want your application to show all the components vertically one below the other. The first way was successful because you are simply rendering content one after another.

But when you use routes this cannot be achieved because it helps in defining multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the routers, the user will be redirected to that particular route. Thus you are only able to see one component.

This can simply be achieved by keeping your stuff the first way and introducing id to all the components div. Then refer to those ids in the navigation component. Example:

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

Upvotes: 2

Related Questions