ReactJS中如何在Admin页面隐藏Navbar组件？已尝试Outlet方法无效

问题描述 #

我正在使用ReactJS进行项目开发，希望在Admin页面中隐藏Navbar（Header）组件。Stack Overflow上有诸多相关解决方案，但均未生效；我尝试过Outlet相关方法，旧方案在新版React中也无法运行。以下是我的App.js代码：

import './App.css';
import Header from './Views/Header';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
import { Routes, Route } from 'react-router-dom';
import Home from './Views/Home';
import Contact from './Views/Contact';
import About from './Views/About';
import Footer from './Views/Footer';
import Login from './Views/Login';
import Signup from './components/Signup';
import UserDashboard from './Views/UserDashboard';
import AllData from './Views/AllData';
import AdminHome from './Admin/AdminHome';
import AdminLogin from './Admin/AdminLogin';
import Error from './Views/Error';
import Blog from './components/Blog';
import Logout from './components/Logout';
import { createContext, useReducer } from 'react';
import { reducer, initialState } from "../src/reducer/UseReducer"
import AboutUser from './components/AboutUser';
import UpdateUser from './components/UpdateUser';
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer } from 'react-toastify'


export const userContext = createContext()

function App() {
  <ToastContainer />

  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>

      <userContext.Provider value={{ state, dispatch }}>

          <Header />
          <Routes>

            <Route exact path="/(login)" element={<Login />} />
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/login' element={<Login />} />
            <Route path='/signup' element={<Signup />} />
            <Route path='/dashboard' element={<UserDashboard />} />
            <Route path='/alldata' element={<AllData />} />
            <Route path="*" element={<Error />} />

            <Route path='/adminlogin' element={<AdminLogin />} />
            <Route path='/admin' element={<AdminHome />} />
            <Route path='/blog' element={<Blog />} />
            <Route path='/logout' element={<Logout />} />
            <Route path='/AboutUser' element={<AboutUser />} />
            <Route path='/updateuser' element={<UpdateUser />} />

          </Routes>
          <Footer />

      </userContext.Provider>
    </>
  );
}

export default App;

解决方案（适配react-router-dom v6+） #

针对你的需求，用路由分组+布局组件的方式就能解决，这是新版react-router-dom推荐的写法，具体修改如下：

1. 定义布局组件 #

先创建两个布局组件，分别对应带Header/Footer的普通页面，和不带Header/Footer的Admin页面：

import { Outlet } from 'react-router-dom';

// 普通页面布局：包含Header和Footer
const MainLayout = () => (
  <>
    <Header />
    <Outlet /> {/* 这里会渲染子路由的内容 */}
    <Footer />
  </>
);

// Admin页面布局：只渲染页面内容，不带Header/Footer
const AdminLayout = () => (
  <>
    <Outlet />
  </>
);

2. 重构路由配置 #

把原有路由按布局分组，普通页面放到MainLayout的子路由里，Admin页面放到AdminLayout的子路由里：

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <>
      <userContext.Provider value={{ state, dispatch }}>
        {/* 修复ToastContainer的渲染问题：之前写在函数体里不会生效，必须放到JSX结构中 */}
        <ToastContainer />
        <Routes>
          {/* 普通页面组：自动带上Header和Footer */}
          <Route element={<MainLayout />}>
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
            <Route path='/login' element={<Login />} />
            <Route path='/signup' element={<Signup />} />
            <Route path='/dashboard' element={<UserDashboard />} />
            <Route path='/alldata' element={<AllData />} />
            <Route path='/blog' element={<Blog />} />
            <Route path='/logout' element={<Logout />} />
            <Route path='/AboutUser' element={<AboutUser />} />
            <Route path='/updateuser' element={<UpdateUser />} />
            <Route path="*" element={<Error />} />
          </Route>

          {/* Admin页面组：不显示Header和Footer */}
          <Route element={<AdminLayout />}>
            <Route path='/adminlogin' element={<AdminLogin />} />
            <Route path='/admin' element={<AdminHome />} />
          </Route>
        </Routes>
      </userContext.Provider>
    </>
  );
}

3. 其他注意事项 #

• 你之前的<ToastContainer />没有放在return的JSX里，这种写法不会渲染组件，必须移到Provider内部的JSX结构中才能正常工作。
• 旧版的路由嵌套方案在v6中已经废弃，用Outlet做布局嵌套是官方推荐的方式，兼容性和扩展性更好。

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