React Dashboard路由异常：点击导航栏链接空白的修复咨询

问题根源 #

你的Dashboard组件里配置的子路由是绝对路径（比如/profile），但Dashboard本身挂载在/dashboard路径下。点击导航链接时，路由会优先匹配App.js中的顶层路由，而App.js里没有/profile这类路由，导致页面空白。同时，Dashboard内没有正确使用嵌套路由的结构来渲染子页面。

修复步骤 #

1. 调整App.js的路由结构，配置嵌套路由 #

将Dashboard的路由改为嵌套形式，让子路由继承父路径：

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './components/login/Login';
import Dashboard from './components/dashboard/Dashboard';
// 提前引入子页面组件
import Profile from './screens/Profile';
import Home from './screens/Home';
import Contacts from './screens/Contacts';
import Codes from './screens/Codes';
import SysInfo from './screens/SysInfo';
import More from './screens/More';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Login />} />
                {/* 配置Dashboard作为父路由，嵌套子路由 */}
                <Route path="/dashboard" element={<Dashboard />}>
                    <Route path="profile" element={<Profile />} />
                    <Route path="home" element={<Home />} />
                    <Route path="contacts" element={<Contacts />} />
                    <Route path="codes" element={<Codes />} />
                    <Route path="sysinfo" element={<SysInfo />} />
                    <Route path="more" element={<More />} />
                    {/* 进入Dashboard时默认显示Home页面 */}
                    <Route index element={<Home />} />
                </Route>
            </Routes>
        </Router>
    );
};

export default App;

2. 修改Dashboard.js，使用Outlet渲染子页面 #

在Dashboard中用Outlet组件来承载嵌套的子路由内容，无需在Dashboard内重复定义路由：

// Dashboard.js
import React from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from '../navbar/Navbar';

export default function Dashboard() {
    return (
        <div>
            <Navbar />
            {/* 用Outlet渲染匹配到的子路由组件 */}
            <Outlet />
        </div>
    );
}

3. 更新NavbarData.js的导航路径为相对路径 #

把导航链接的路径改为相对于/dashboard的相对路径，避免跳转到顶层路由：

// NavbarData.js
import React from 'react';
import { FaUser, FaHome, FaAddressBook, FaList, FaInfoCircle, FaEllipsisH } from "react-icons/fa";

export const SidebarData = [
  {
    title: 'Profile',
    path: 'profile', // 去掉开头的/，使用相对路径
    icon: <FaUser />,
    cName: 'nav-text'
  },
  {
    title: 'Home',
    path: 'home',
    icon: <FaHome />,
    cName: 'nav-text'
  },
  {
    title: 'Contacts',
    path: 'contacts',
    icon: <FaAddressBook />,
    cName: 'nav-text'
  },
  {
    title: 'Codes',
    path: 'codes',
    icon: <FaList />,
    cName: 'nav-text'
  },
  {
    title: 'System Information',
    path: 'sysinfo',
    icon: <FaInfoCircle />,
    cName: 'nav-text'
  },
  {
    title: 'More',
    path: 'more',
    icon: <FaEllipsisH />,
    cName: 'nav-text'
  },
];

验证效果 #

完成上述修改后，登录进入Dashboard页面，点击导航栏的各个链接，就能正确渲染对应的子页面，不会再出现空白。

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