我正在学习React，我不明白为什么react路由器v6没有渲染任何组件。

源代码/索引.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 />}>
                <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
);

源代码/模块/发票/发票.js

import { Link } from "react-router-dom";
import { getInvoices } from "../../data";

export default function Invoices() {
  let invoices = getInvoices();
  return (
    <div style={{ display: "flex" }}>
      <nav
        style={{
          borderRight: "solid 1px",
          padding: "1rem",
        }}
      >
        {invoices.map((invoice) => (
          <Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/invoices/${invoice.number}`}
            key={invoice.number}
          >
            {invoice.name}
          </Link>
        ))}
      </nav>
    </div>
  );
}

data.js取自React路由器文档https://reactrouter.com/docs/en/v6/getting-started/tutorial

我做错了什么？