React Page not rendering on button click

Question

I have started doing a project in react js and i have been trying to wrap my head around routing and other concepts, i have had a problem with the routing and the problem is, when i run the project, there is a button in home page and then i click on that button, it should go to other pages, in my case, when the button is clicked, the content appears right on the bottom the home page.

App.js

import * as React from 'react';
import {BrowserRouter as Route, Routes} from "react-router-dom";
import { LandingPage, NavBar, Footer } from './Containers';
import './App.css';
import Scroll from './scroll';

function App() {
  return (
    <div className="App">
        <div>
            <NavBar />
            <LandingPage />
             <Routes>
               <Route path="/scroll" element={<Scroll />} />
             </Routes>
            <Footer />
        </div>
    </div>
  );
}
export default App;

landingPage.js

import React from "react";
import { Route, Routes, useNavigate, Link } from "react-router-dom";
import Scroll from "../../scroll";
import "./landingPage.css";

const LandingPage = () => {
  const Navigate = useNavigate();
  
  const handleClick = () => {
    Navigate('/scroll');
  }
  return (<>
      <div >
        <div >
          <div >
              <h1 >Amet minim mollit non deserunt ullamco est sit aliqua dolor doamet sint. Velit officia</h1>
              <p >Amet minim mollit non deserunt ullamco est sit aliqua dolor doamet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            <h3>
              <div >
              <Link to={"./scroll"}>
                <button onClick={()=>handleClick()}>
                  <bold>Get Started</bold>
                </button>
              </Link>
              </div>
            </h3>
          </div>
         </div >
        </div>
 </>
  );
};

export default LandingPage;

scroll.js

import React from 'react'
import HorizontalScroll from 'react-scroll-horizontal';

import './scroll.css';

import { Execution1, Execution2, Execution3, Execution4, Execution5, Execution6, Onboarding, PDP } from './Containers';

function scroll() {
    const Object = {height: `77%`, width: `100vw`}
  return (
    <>
      
      <HorizontalScroll reverseScroll={true} style={Object} >
        <PDP className="main"/>
        <Onboarding className="main" />
        <Execution1 className="main" />
        <Execution2 className="main" />
        <Execution3 className="main" /> 
        <Execution4 className="main" />
        <Execution5 className="main" />
        <Execution6 className="main" />
      </HorizontalScroll>
    </>
  )
}

export default scroll

The ones in ./Containers are components like landing page. What i wanted to do was, when we click in the button of LandingPage, the whole component from scroll.js schould appear and they should be rendered horizontally.

but, as of now. i can only see the urls changing but not the contents.

My folder structure is like this.

Answer 1

You've mixed up the component imports, specifically you've imported BrowserRouter as Route and there's no route component.

Fix the BrowserRouter component import and then also import the Route component to render the Scroll component on. Ensure the router wraps all the components that need to access the routing context (i.e. Link, and Route, etc). You might also want to render LandingPage on the home path "/" so it's not also rendered when navigating to the "/scroll" page.

import * as React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { LandingPage, NavBar, Footer } from './Containers';
import './App.css';
import Scroll from './scroll';

function App() {
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/scroll" element={<Scroll />} />
        </Routes>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

In the LandingPage don't attach an onClick handler to the button element nested in the Link component, just let the Link handle issuing the navigation action to "/scroll".

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

const LandingPage = () => {
  return (
    <div>
      <div>
        <div>
          <h1>Amet minim mollit .... officia</h1>
          <p>Amet minim mollit .... sunt nostrud amet.</p>
          <h3>
            <div>
              <Link to="/scroll">
                <bold>Get Started</bold>
              </Link>
            </div>
          </h3>
        </div>
      </div >
    </div>
  );
};

export default LandingPage;

Answer 2

create a route for PDP. In your App.js, add this code.

import React from "react"
import NavBar from "./NavBar"
import PDPfrom "./PDP"
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";

function App() {
    return (
        <Router>
        <div>
            <NavBar />
            <Route path="/PDP" component={PDP} />
        </div>
        </Router>
        )
}

export default App

Now in your landing Page where you're using Button, Add this

import { Link } from 'react-router-dom'

    <Link to={"./PDP"}>
        Get Started  
    </Link>