How can I get my Multipage website to route properly in React

Question

I am trying to get a Multipage React website working, however, I can't seem to get the routes working? can anyone help me out on what's wrong with my routes as seen here?

Essentially I am trying to make a conventional website where there are different pages you can go to via the navbar.

TSYM to anyone that replies!!

App.js (this is where the routing happens)

import React, { useState, useEffect } from 'react';
import './App.css';
import Navbar from './Components/Navbar';
import Footer from './Components/Footer';

import Hero from './Components/Hero';
import AboutUs from './Components/AboutUs';
import OurProgram from './Components/OurProgram';
import Research from './Components/Research';
import Data from './Components/Data';
import Loan from './Components/Loan';
import ScrollToTop from './Components/ScrollToTop';
import Gov from './Components/Gov';
import MoreAboutUs from './Components/MoreAboutUs';
import Farmer from './Components/Farmers';
import Supplier from './Components/Suppliers';
import Contact from './Components/Contact';


import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';



function App() {

  return (
    <>
      <Router>

        <nav>
          <Navbar />
          <ScrollToTop />
        </nav>

        <Switch>
          <Route exact path="/">
            <Hero/>
            <AboutUs />
            <Footer />
          </Route>

          <Route exact path="/Our Program">
            <OurProgram/>
            <Footer />
          </Route>

          <Route exact path="/Research">
            <Research/>
            <Footer />
          </Route>

          <Route exact path="/Loan">
            <Loan/>
            <Footer />
          </Route>

          <Route exact path="/Contact">
            <Contact/>
            <Footer />
          </Route>

          <Route exact path="/Gov">
            <Gov/>
            <Footer />
          </Route>

          <Route exact path="/Farmer">
            <Gov/>
            <Footer />
          </Route>

          <Route exact path="/Supplier">
            <Gov/>
            <Footer />
          </Route>


        </Switch>

      </Router>
    </>
  );
}

export default App;

Navbar.js (Navbar component)

import React from 'react';
import { Link as Routerlink } from 'react-router-dom'
import Logo from './Images/LOGO.png';
import { Link, animateScroll as scroll } from "react-scroll";


const Navbar = () => {
    return (
        <nav className="sticky top-0 bg-white shadow-md z-50">
            <div class="container mx-auto flex flex-wrap flex-col md:flex-row items-center">
                <Link to="Hero" smooth={true} duration={500} class="flex title-font font-medium items-center text-green-900 mb-1 md:mb-0 cursor-pointer">
                    <img className='object-scale-down h-28 w-36 md:object-contain md:h-38 md:w-46' src={Logo} alt="" />

                </Link>
                <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex-wrap items-center text-base justify-center md:block hidden">
                    <Link to="/" className='mr-5 hover:text-gray-900 cursor-pointer '>HOME</Link>
                    <Link to="/OurProgram" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>AMING MGA PROGRAMA</Link>
                    <Link to="/Loan" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>PAG-UTANG</Link>
                    <Link to="/Research" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>PANANALIKSIK</Link>
                    <Link to="/" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>PANANALIKSIK</Link>
                    <Link to="/Gov" smooth={true} duration={500} className='mr-5 hover:text-gray-900 cursor-pointer'>USEFUL GOV LINKS</Link>


                </nav>

                <div className='space-x-1 mb-2 md:block hidden'>
                    <a href="https://eagro.seelgubayambang.com/" class="inline-flex items-center bg-yellow-500 text-white font-bold border-0 py-2 px-3 focus:outline-none hover:bg-yellow-700 rounded text-base mt-4 md:mt-0">Login</a>
                    <a href="https://eagro.seelgubayambang.com/verify.php" class="inline-flex items-center bg-yellow-500 text-white font-bold border-0 py-2 px-3 focus:outline-none hover:bg-yellow-700 rounded text-base mt-4 md:mt-0">Register</a>
                </div>
                <div className=" flex items-center md:block mt-2 mb-2" >
                    <Link to="/" className="bg-yellow-500 text-white font-bold py-2 px-3 rounded-md md:hidden">Menu</Link>
                </div>
            </div>
        </nav>
    );


};

export default Navbar;

Answer 1

Try this structure:

const location = useLocation();

<div>
  <Navbar />
  <div>
    <Routes>
      {location.pathname === "/" ? (
        <Route path="/" element={<HomePage />} />
      ) : (
        <>
          <Route path="/Our Program" element={<OurProgram />} />
            // And other Routes
          <Route path="/research " element={<Research />} />
        </>
      )}
    </Routes>
  </div>
</div>;

We can access url pathname with userLocation(), and check if it's on "/" route, if it is, we show home page, otherwise, other routes.

Navbar is always on the top, where homePage and other routes are switchable.

This is V6 syntax, but logic is the same.

Answer 2

Each <Route> should return a single div.

• In your case, you have to wrap multiple components in a single div. Like:

    <Route exact path="/">
        <>
            <Hero/>
            <AboutUs />
            <Footer />
        </>
    </Route>

Answer 3

use Routes instead of Switch, since Switch is deprecated