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

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 >
                <Link to="Hero" smooth={true} duration={500} >
                    <img className='object-scale-down h-28 w-36 md:object-contain md:h-38 md:w-46' src={Logo} alt="" />

                </Link>
                <nav >
                    <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/" >Login</a>
                    <a href="https://eagro.seelgubayambang.com/verify.php" >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;

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

use Routes instead of Switch, since Switch is deprecated