React Router 应用中特定页面导航栏的按需显示策略

// src/components/Layout/Layout.jsx
import React from 'react';
import Navbar from '../Navbar/Navbar'; // 假设你的导航栏组件路径
import Footer from '../Footer/Footer'; // 假设你的页脚组件路径

/**
 * 页面布局组件，包含导航栏和页脚
 * @param {object} props - 组件属性
 * @param {React.ReactNode} props.children - 需要被布局包裹的页面内容
 */
const Layout = ({ children }) => {
    return (
        <div className="layout-container d-flex flex-column min-vh-100">
            <Navbar /> {/* 导航栏 */}
            <main className="flex-grow-1">
                {children} {/* 页面内容 */}
            </main>
            <Footer /> {/* 页脚 */}
        </div>
    );
};

export default Layout;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 导入页面组件
import Home from './components/Home';
import Login from './components/Login';
import About from './components/About';
import Contact from './components/Contact';
import Blog from './components/Blog';
import NotFound from './components/NotFound'; // 404页面

// 导入布局组件
import Layout from './components/Layout/Layout';

function App() {
    return (
        <Router>
            <Routes>
                {/* 使用Layout包裹的路由，这些页面会显示导航栏和页脚 */}
                <Route path="/" element={<Layout><Home /></Layout>} />
                <Route path="/about" element={<Layout><About /></Layout>} />
                <Route path="/contact" element={<Layout><Contact /></Layout>} />
                <Route path="/blog" element={<Layout><Blog /></Layout>} />

                {/* 不使用Layout的路由，这些页面不会显示导航栏和页脚 */}
                <Route path="/login" element={<Login />} />
                <Route path="*" element={<NotFound />} /> {/* 404页面通常不需要导航栏 */}
            </Routes>
        </Router>
    );
}

export default App;