React Router应用中灵活控制导航栏显示与隐藏的布局模式

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar'; // 假设Navbar组件
import Home from './components/Home';
import Login from './components/Login';
import NotFound from './components/NotFound'; // 404页面

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar /> {/* 导航栏在此处被渲染 */}
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="*" element={<NotFound />} /> {/* 无论如何Navbar都会显示 */}
          </Routes>
        </div>
      </Router>
    );
  }
}

export default App;

// src/components/Layout/Layout.js
import React from 'react';
import Navbar from '../Navbar/Navbar'; // 导入你的Navbar组件
import Footer from '../Footer/Footer'; // 导入你的Footer组件 (可选)

export const Layout = ({ children }) => {
    // 可以在此处添加样式类，例如用于Flexbox布局
    return (
        <div className="app-layout d-flex flex-column min-vh-100"> 
            <Navbar /> {/* 导航栏 */}
            <main className="flex-grow-1">
                {children} {/* 页面内容将在此处渲染 */}
            </main>
            <Footer /> {/* 页脚 (可选) */}
        </div>
    );
};

// src/App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// import Navbar from './components/Navbar'; // 不再直接在App中渲染Navbar
import { Layout } from './components/Layout/Layout'; // 导入布局组件

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页面

class App extends Component {
  render() {
    return (
      <Router>
        {/* Navbar不再直接在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>} />

          {/* 不需要导航栏的页面，直接渲染组件 */}
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<NotFound />} /> {/* 404页面不显示导航栏 */}
        </Routes>
      </Router>
    );
  }
}

export default App;