React嵌套路由问题：添加Outlet后页面仍显示空白

你的代码存在几个关键问题导致页面空白：

• 嵌套路由配置逻辑错误：未在App.js中将Overview、Reports设为Dashboard的子路由，反而在Dashboard内部单独定义Routes，不符合react-router-dom的嵌套路由规则
• Link路径错误：当前处于/dashboard路径下，Link的to属性不应重复写dashboard/，需使用相对路径
• Outlet未关联有效子路由：子路由未挂载到父路由下，Outlet无法渲染对应内容

修正后的代码 #

App.js #

import './App.css';
import Home from './component/Home';
import Dashboard from './component/Dashboard';
import Navigation from './component/Navigation';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Overview from './component/Overview';
import Reports from './component/Reports';

function App() {
  return (
    <div className="App">
      App
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 将Dashboard设为父路由，嵌套子路由 */}
        <Route path="/dashboard" element={<Dashboard />}>
          {/* index路由：访问/dashboard时默认渲染Overview */}
          <Route index element={<Overview />} />
          {/* 子路由路径相对父路由，自动拼接为/dashboard/reports */}
          <Route path="reports" element={<Reports />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

Dashboard.js #

import React from 'react'
import { Link, Outlet } from 'react-router-dom'

const Dashboard = () => {
  return (
    <>
      <div>Dashboard</div>
      {/* 使用相对路径跳转 */}
      <Link to="./">Overview</Link>
      <Link to="reports">Reports</Link>
      
      {/* Outlet负责渲染父路由下的子组件 */}
      <Outlet />
    </>
  )
}

export default Dashboard

核心说明 #

• 父路由的子路由无需添加前置/，react-router-dom会自动与父路由路径拼接
• index路由用于设置父路由的默认渲染组件，访问/dashboard时直接显示Overview
• Link使用相对路径时，./代表当前路径，直接写子路径名称即可完成跳转，避免重复书写父路径

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