使用React Router v6开发应用后页面空白无内容求助

你的代码存在两个核心问题导致页面空白：

1. 未添加路由上下文容器 #

React Router v6 要求所有路由相关组件必须包裹在 BrowserRouter（或 HashRouter）内部，否则路由系统无法识别 Routes 和 Route 组件，直接导致页面无内容渲染。

修复步骤： #

在项目的入口文件（通常是 index.js）中，用 BrowserRouter 包裹你的 App 组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. 路由匹配逻辑不完善 #

你的代码仅定义了 /invoices 及其子路由，但：

• 访问根路径 / 时没有对应的路由匹配，页面会空白；
• 访问 /invoices 时，因为没有设置 index 路由，Outlet 没有内容渲染，仅会显示 <h1>Invoices</h1>，但如果没有路由上下文的话这部分也不会显示。

优化后的App组件代码： #

import React from "react";
import { Routes, Route, Outlet, Link } from "react-router-dom";

function App() {
  return (
    <div>
      {/* 添加导航链接方便测试路由跳转 */}
      <nav>
        <Link to="/">首页</Link> |{' '}
        <Link to="/invoices">发票列表</Link> |{' '}
        <Link to="/invoices/123">发票详情123</Link> |{' '}
        <Link to="/invoices/sent">已发送发票</Link>
      </nav>
      <Routes>
        {/* 根路由内容 */}
        <Route path="/" element={<h1>首页</h1>} />
        <Route path="invoices" element={<Invoices />}>
          {/* index路由：访问/invoices时默认显示的内容 */}
          <Route index element={<p>请选择上方的发票选项</p>} />
          <Route path=":invoiceId" element={<Invoice />} />
          <Route path="sent" element={<SentInvoices />} />
        </Route>
        {/* 404路由：匹配所有未定义的路径 */}
        <Route path="*" element={<h1>页面未找到</h1>} />
      </Routes>
    </div>
  );
}

function Invoices() {
  return (
    <div>
      <h1>发票管理</h1>
      <Outlet />
    </div>
  );
}

function Invoice() {
  return <h1>发票详情</h1>;
}

function SentInvoices() {
  return <h1>已发送发票</h1>;
}

export default App;

完成以上修改后，启动项目即可看到正常渲染的页面，通过导航链接可以测试不同路由的效果。

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