如何在React Router 6的PrivateRoutes内渲染Navbar组件

你可以直接修改PrivateRoutes组件，让它在渲染受保护的子路由内容时，同时渲染Navbar组件。具体做法是利用React Router的Outlet组件来承载子路由的内容，把Navbar和Outlet放在同一个组件里：

1. 修改PrivateRoutes组件 #

import { Outlet, Navigate } from 'react-router-dom';
import Navbar from './Navbar'; // 导入你的Navbar组件

function PrivateRoutes() {
  const { auth } = useContext(AuthContext); // 从上下文获取认证状态

  // 如果未认证，跳转到登录页
  if (!auth) {
    return <Navigate to="/login" replace />;
  }

  // 已认证的话，渲染Navbar和子路由内容
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
}

export default PrivateRoutes;

2. 保持App组件结构不变 #

你的现有App组件结构不需要改动，因为PrivateRoutes已经负责渲染Navbar了，所有嵌套在PrivateRoutes下的路由（比如Home、About）都会自动带上Navbar，而登录页这类公开路由则不会显示Navbar：

return (
  <Router>
    <AuthContext.Provider value={{ auth, setAuth }}>
      
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="*" element={<Login />} />
        <Route element={<PrivateRoutes />}>
          <Route path="/" element={<Home />} exact />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </AuthContext.Provider>
  </Router>
);

原理说明 #

• Outlet是React Router提供的组件，用来渲染当前路由匹配到的子路由内容。
• 把Navbar和Outlet放在PrivateRoutes里，就能确保只有进入受保护路由时才会显示Navbar，完全符合你的需求。

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