react-router-dom v6.4.5固定导航栏添加及组件不显示问题解决

问题分析 #

你的代码存在两个核心问题导致Home和Auth组件无法正常显示：

1. 缺少<Outlet />组件：React Router v6中，嵌套路由的父组件必须通过<Outlet />渲染子路由对应的组件，你的App组件未添加该出口，导致子路由内容无法展示。
2. 根路径无默认路由：访问根路径/时没有对应组件或重定向规则，会显示空白页面。

同时，要实现固定导航栏，需利用MUI组件特性设置固定定位，并调整内容区域内边距避免被导航栏遮挡。

修正后的代码 #

1. 更新App组件（添加Outlet和内容内边距） #

import { Container } from "@mui/material";
import Navbar from "./components/Navbar/Navbar";
import { Outlet, Navigate } from "react-router-dom";

export const App = () => {
  return (
    <Container maxWidth="lg" sx={{ paddingTop: "80px" }}>
      {/* 固定导航栏会遮挡内容，添加顶部内边距避开 */}
      <Navbar />
      {/* Outlet是子路由内容的渲染出口 */}
      <Outlet />
    </Container>
  );
};

2. 完善路由配置（添加根路径重定向） #

import Home from "./components/Home/Home";
import Auth from "./components/Auth/Auth";
import { createBrowserRouter, Route } from "react-router-dom";
import { App } from "./App";

const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      // 根路径重定向到Home页面
      { path: "/", element: <Navigate to="/home" /> },
      { path: "/home", element: <Home /> },
      { path: "/auth", element: <Auth /> },
    ],
  },
]);

export default router;

3. 修改Navbar组件实现固定定位 #

假设你的Navbar使用MUI的AppBar组件，调整如下：

import { AppBar, Toolbar, Typography, Button } from "@mui/material";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    {/* 设置position="fixed"实现固定导航栏 */}
    <AppBar position="fixed">
      <Toolbar>
        <Typography variant="h6" sx={{ flexGrow: 1 }}>
          我的应用
        </Typography>
        {/* 使用react-router-dom的Link组件实现单页导航 */}
        <Button color="inherit" component={Link} to="/home">首页</Button>
        <Button color="inherit" component={Link} to="/auth">登录</Button>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

关键说明 #

• <Outlet />的作用：作为子路由内容的占位符，访问子路由路径时，对应组件会渲染在Outlet位置。
• 固定导航栏的处理：通过position="fixed"将AppBar固定在顶部，同时给内容容器添加paddingTop，避免内容被导航栏遮挡（数值可根据导航栏实际高度调整）。
• 路由重定向：添加根路径到Home页面的重定向，确保用户打开应用时直接看到Home组件。

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