React router v6 how to correctly route to the main page?

Question

React

In the old version, I just gave a link to the App component.
<Route path='/' component={App}/>
And if according to the new documentation, then there will be an endless download
<Route path='/' element={<App/>}/>
. How can I add a link to the main one in the new version, preferably without using new components, or just "/" is enough?

Answer 1

https://reactrouter.com/docs/en/v6/getting-started...

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="expenses" element={<Expenses />} />
        <Route path="invoices" element={<Invoices />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  rootElement
);

import { Outlet, Link } from "react-router-dom";
export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem"
        }}
      >
        <Link to="/invoices">Invoices</Link> |{" "}
        <Link to="/expenses">Expenses</Link>
      </nav>
      <Outlet />
    </div>
  );
}