Why is my component showing when i don't have it in my app.js I want my Menu component to be on another page, but it's showing on the bottom of app.js file.

Here's my app.js `

import './App.css';
import Navbar from './Components/Navbar';
import Menu from './Components/Menu';
import Section from './Components/Section';
import { Routes, Route } from 'react-router-dom';
import Footer from './Components/Footer';

function App() {
    return (
        <>
            <Navbar />
            <Section />
            <Footer />

            <Routes>
                <Route path="/"></Route>
                <Route path="/menu" element={<Menu/>}></Route>
            </Routes>
        </>
    );
}

export default App;

Here's my navbar component

import React from 'react';
import { Link as LinkTo } from 'react-router-dom';
import logo from '../Images/logo.png';
import { FaBars, FaTimes } from 'react-icons/fa';
import { useRef } from 'react';
import './Navbar.css';
import { Link } from 'react-scroll';

function Navbar() {
    const navRef = useRef();

    const showNavbar = () => {
        navRef.current.classList.toggle('responsive_nav');
    };

    return (
        <>
            <nav className='full-nav' ref={navRef}>
                <img className='nav-logo' src={logo} alt='Burritos la chiquita Logo' />
                <ul style={{ listStyle: 'none', cursor: 'pointer' }}>
                    <li>
                        <LinkTo to="/menu" onClick={showNavbar}>
                            Menu
                        </LinkTo>
                    </li>
                    <li>
                        <Link
                            activeClass='active'
                            to='about'
                            spy={true}
                            smooth={true}
                            onClick={showNavbar}>
                            About Us
                        </Link>
                    </li>
                    <li>
                        <Link
                            activeClass='active'
                            to='Location'
                            spy={true}
                            smooth={true}
                            onClick={showNavbar}>
                            Location
                        </Link>
                    </li>
                    <button className='nav-btn nav-close-btn' onClick={showNavbar}>
                        <FaTimes />
                    </button>
                </ul>
            </nav>

            <div className='nav-container'>
                <img src={logo} alt='' srcset='' className='nav-logo' />
                <button className='nav-btn' onClick={showNavbar}>
                    <FaBars />
                </button>
            </div>
        </>
    );
}

export default Navbar;

`

enter image description here

The Menu component shows under the footer and now on a new webpage.

Please and thank you for your help!

CodePudding user response：

You are rendering footer above the routes in your app.js. You should place your routes between navbar & footer. eg.

 <>
        <Navbar />
        <Section />
         <Routes>
            <Route path="/"></Route>
            <Route path="/menu" element={<Menu/>}></Route>
        </Routes>
        <Footer />
    </>

CodePudding user response：

you may have placed the component in some other component

 <App>
      <Parent/>
 </App>

in Parent.js

<div>
  <Child/>
</div>