React路由异常：Menu组件未在指定页面显示却出现在App.js底部

希望Menu组件仅在独立页面展示，但点击导航栏的Menu后，Menu并未在新页面显示，而是出现在App.js页面的Footer组件下方。

相关代码 #

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 path="/menu" element={<Menu/>} />
            </Routes>
        </>
    );
}

export default App;

Navbar组件 #

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;

问题原因 #

你的App.js中，Section和Footer是直接在Routes组件外部渲染的，这意味着无论当前路由是什么，这两个组件都会始终显示在页面上。而Routes的作用是根据当前路由渲染对应内容，所以Menu组件会被追加到Footer的下方，而不是替换原有内容。

解决方案 #

修改App.js，将Section和Footer移到根路由（/）的element属性中，这样只有访问首页时才会显示它们；访问/menu路由时，只会显示Navbar和Menu组件，实现Menu的独立页面展示：

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 />
            <Routes>
                {/* 首页显示 Section 和 Footer */}
                <Route path="/" element={
                    <>
                        <Section />
                        <Footer />
                    </>
                } />
                {/* 菜单页面仅显示 Menu */}
                <Route path="/menu" element={<Menu/>} />
            </Routes>
        </>
    );
}

export default App;

这样调整后，点击导航栏的Menu链接，页面就会切换到仅包含Navbar和Menu的独立页面，不会再出现Section和Footer，Menu也就不会显示在Footer下方了。

内容的提问来源于stack exchange，提问作者fredo