在React Router应用中按需隐藏导航栏的策略

// src/components/Layout/Layout.jsx
import React from 'react';
import { Navbar } from "../Navbar/Navbar"; // 假设你的Navbar组件路径
import { Footer } from "../Footer/Footer"; // 假设你的Footer组件路径

export const Layout = ({ children }) => {
    // 你可以在这里添加主题相关的props，如darkTheme, setDarkTheme等
    // const [darkTheme, setDarkTheme] = useState(false); // 示例
    return (
        <div className="layout d-flex flex-column">
            {/* 导航栏通常在这里渲染 */}
            <Navbar /* darkTheme={darkTheme} setDarkTheme={setDarkTheme} */ />
            {/* 主内容区域，通过children渲染实际页面组件 */}
            <main className="d-flex justify-content-around flex-grow-1">
                {children}
            </main>
            {/* 页脚通常在这里渲染 */}
            <Footer />
        </div>
    );
};

// src/App.jsx
import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound'; // 404页面
import { Layout } from './components/Layout/Layout'; // 导入布局组件

class App extends Component {
  render() {
    return (
      <Router>
        {/* 注意：在这里不再直接渲染Navbar */}
        <div>
          <Routes>
            {/* 需要导航栏和页脚的页面，使用Layout包裹 */}
            <Route path="/" element={<Layout> <Home/> </Layout>} />
            <Route path="/about" element={<Layout> <About/> </Layout>} />
            {/* 不需要导航栏和页脚的页面（如404），直接渲染 */}
            <Route path="*" element={<NotFound />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;