React-Router-Dom中Outlet组件失效，导航栏未在各页面显示

核心问题是根路由配置时属性名错误：你在App.js的根路由对象里使用了错误的elements属性（多了一个字母s），React Router的路由配置中指定组件的正确属性名是element（单数形式）。由于这个错误，RootLayout组件没有被正确挂载，导致其中的Navigation导航栏无法在任何页面显示。

修正后的App.js代码 #

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./Pages/home";
import Contact from './Pages/contact';
import AboutPage from "./Pages/About";
import RootLayout from "./Pages/Root";
import ProductPage from "./Pages/Product";
import ProductDetails from "./Pages/ProductDetails";
// 注意：原代码中未导入ErrorPage，若需要请补充导入
// import ErrorPage from "./Pages/Error";

const router = createBrowserRouter([
  {
      path: '/',
      element: <RootLayout />, // 这里把elements改为element
      errorElement: <ErrorPage />,
      children: [
        {path:'/', element:<HomePage />},
        { path: 'contact', element: <Contact /> },
        { path: 'about', element: <AboutPage /> },
        { path: 'product', element: <ProductPage /> },
        { path: 'product/:productId', element: <ProductDetails /> },
      ],
  },
]);

function App() {
  return (
    <RouterProvider router={router} />
  );
}

export default App;

其他代码确认 #

你的RootLayout（Route.js文件，建议重命名为Root.js更清晰）和Navigation组件的写法都是正确的：

• RootLayout中通过<Outlet />渲染子路由页面，同时引入Navigation组件作为全局导航栏
• Navigation组件使用NavLink实现路由跳转和激活状态样式

修正后，RootLayout会被正确渲染，导航栏就能在所有子路由页面中显示了。

内容的提问来源于stack exchange，提问作者Ashmit-Kumar