React Router v6路由配置后组件未正常渲染问题求助

你的问题核心是嵌套路由的父组件缺少路由渲染出口，React Router v6 中所有嵌套在父路由下的子路由，都需要父级路由对应的组件渲染 <Outlet /> 组件作为子内容的挂载位置，否则即使路径匹配成功，子组件也不会被渲染到页面上。
除此之外你的路由配置还有一个不规范的点：嵌套子路由的path写了以/开头的绝对路径，会脱离父路由的路径前缀独立匹配，后续如果调整父路由路径，所有子路由都要同步修改，维护成本很高。

问题运行效果：

• 修改父组件src/App.js，引入并渲染<Outlet />作为子路由的渲染出口，参考代码：

import { Outlet } from 'react-router-dom';
import './App.css';

function App() {
  return (
    <div className="app-container">
      {/* 全局导航、侧边栏、公共布局等内容可以写在这里 */}
      
      {/* 👇 必须添加这个标签，匹配到的子路由组件会渲染到这个位置 */}
      <Outlet />
    </div>
  );
}

export default App;

• （可选但强烈建议）调整src/index.js中的子路由路径写法，去掉开头的/，使用相对路径写法，和父路由自动拼接：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Customers, Invoices, Jobs, Login, Sales } from './modules'

import './App.css';
import './index.css';

import App from './App';

const rootElement = document.getElementById("root");
ReactDOM.render(
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App />}>
                {/* 把原来的 path="/jobs" 改成 path="jobs"，和其他子路由写法统一 */}
                <Route path="jobs" element={<Jobs />} />
                <Route path="customers" element={<Customers />} />
                <Route path="invoices" element={<Invoices />} />
                <Route path="sales" element={<Sales />} />
                <Route
                path="*"
                element={
                    <main style={{ padding: "1rem" }}>
                    <p>There's nothing here!</p>
                    </main>
                }
                />
            </Route>
        </Routes>
    </BrowserRouter>,
    rootElement
);

如果你后续要实现发票详情页（对应路径/invoices/:invoiceId），只需要在invoices路由下继续嵌套子路由即可，同时要在Invoices.js组件里也添加<Outlet />作为详情组件的渲染出口，逻辑和顶层父路由完全一致。

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