Let me start by disclosing that this is part of the capstone project for a React course I am taking in Coursera. I am not interested in the answer per se. I just want someone to tell me what is wrong and why. If later on I cannot figure it out, I will edit this question with what I did to attempt to fix the issue based on the feedback I received. For now, all I need is someone to point me in the right direction.

Right now, the home page renders correctly, as far as I can tell, because haven't defined the routing. When I try to set the routing to the home page, the same issue shown in the picture below occurs. What I want is to set the routing so that when I go to a page, only the contents of that page is shown and nothing else. Right now it seems like, no matter what I do, the contents of the App component gets mixed up with whichever page I navigate to. When I navigate to the home page, it seems the contents of the app doubles. The picture below is an example of what the BookingPage looks like when I click on "Reservations" link. When the Route is not defined, it appears as if the contents of the App component renders normally.

import { Routes, Route, Link } from "react-router-dom";
import BookingPage from "./BookinPage";
import AboutUs from "./AboutUs";
import Menu from "./Menu";

function Nav () {
  return(
    <div>
      <nav>
        <ul>
          <li><Link to="/" className="link">Home</Link></li>
          <li><Link to="/about" className="link">About</Link></li>
          <li><Link to="/menu" className="link">Menu</Link></li>
          <li><Link to="/booking" className="link">Reservations</Link></li>
          <li><Link to="/" className="link">Order Online</Link></li>
          <li><Link to="/" className="link">Login</Link></li>
        </ul> 
      </nav>
      <Routes> 
        <Route path="/menu" element={<Menu />} />
        <Route path="/booking" element={<BookingPage />} />
      </Routes>
    </div>
  );
}

export default Nav;

import './App.css';
import Header from './Header';
import Main from './Main';
import Nav from './Nav';
import "@fontsource/karla"
import "@fontsource/markazi-text";


function App() {
  return (
    <>
      <div className="banner">
        <Header />
        <Nav />
      </div>
      <Main />
    </>
  );
}

export default App;

The Header component contains the logo and the Main component contains the different sections of the home page. Here are the code for those two components:

import logo from './assets/images/little_lemon_logo(sm).jpg'

function Header () {
  return (
    <header>
      <meta name="description" content="The Little Lemon restaurant website"/>
      <meta name="og:title" content="Little Lemon"/>
      <meta name="og:image" content="https://unsplash.com/photos/focus-photography-of-pumpkin-V1dae2Jj6-0"/>
      <img src={logo} alt="Little Lemon's logo" />
    </header>
  );
}

export default Header;

import Hero from "./Hero";
import Homepage from "./Homepage";
import Testimonials from "./Testimonials";
import AboutUs from "./AboutUs";
import Footer from "./Footer";

function Main () {
  return (
    <>
      <Homepage />
      <Hero />
      <Testimonials />
      <AboutUs />
      <Footer />
    </>
  );
}

export default Main;

Also, rather than posting all the code, I will add the link to the project location in GitHub: Little Lemon capstone project.

Just in case, I am using react-router-dom version 6.27.0.

Issue

The Nav component renders the navbar and your routes, and App renders both Nav and Main, always. The "home page" Main content is rendered regardless what the URL path is and what route is currently matched and rendered.

function Nav () {
  return(
    <div>
      <nav>
        <ul>
          <li><Link to="/" className="link">Home</Link></li>
          <li><Link to="/about" className="link">About</Link></li>
          <li><Link to="/menu" className="link">Menu</Link></li>
          <li><Link to="/booking" className="link">Reservations</Link></li>
          <li><Link to="/" className="link">Order Online</Link></li>
          <li><Link to="/" className="link">Login</Link></li>
        </ul> 
      </nav>
      <Routes> 
        <Route path="/menu" element={<Menu />} />
        <Route path="/booking" element={<BookingPage />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <>
      <div className="banner">
        <Header />
        <Nav />
      </div>
      <Main />
    </>
  );
}

Solution Suggestion

• Move the routes out of Nav and into App
• Render Main on a home route so it's rendered by itself instead of with all the other route content

function Nav () {
  return(
    <div>
      <nav>
        <ul>
          <li><Link to="/" className="link">Home</Link></li>
          <li><Link to="/about" className="link">About</Link></li>
          <li><Link to="/menu" className="link">Menu</Link></li>
          <li><Link to="/booking" className="link">Reservations</Link></li>
          <li><Link to="/" className="link">Order Online</Link></li>
          <li><Link to="/" className="link">Login</Link></li>
        </ul> 
      </nav>
    </div>
  );
}

function App() {
  return (
    <>
      <div className="banner">
        <Header />
        <Nav />
      </div>
      
      <Routes> 
        <Route path="/" element={<Main />} />
        <Route path="/menu" element={<Menu />} />
        <Route path="/booking" element={<BookingPage />} />
      </Routes>
    </>
  );
}