React Router v6 - 不渲染

Question

我正在學習 React。 我不明白為什么 react router v6 不渲染任何組件。

源代碼/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 />}>
                <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
);

src/modules/invoices/Invoices.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-router 文檔https://reactrouter.com/docs/en/v6/getting-started/tutorial

我做錯了什么？

Answer 1

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>
                }
            />
       
        </Routes>
    </BrowserRouter>,
    rootElement
);

我發現了這些錯誤，

1. 您已將所有組件包含在單個路由中。

或者如果您希望所有內容都在您的組件中。 然后在 App 組件本身中初始化路由器。 你可以參考這個 https://github.com/NaveenkumarMD/cryptera-website/blob/master/src/App.js