React router v6 как правильно делать route на главную страницу?

Question

[AndreyVolkov72]

В старой версии я просто давал ссылку на компонент App.
<Route path='/' component={App}/>
А если по новой документации, то будет бесконечная загрузка
<Route path='/' element={<App/>}/>
Как в новой версии добавить ссылку на главную, желательно без использования новых компонентов, или хватает просто "/" ?

Comments

[Mikhail Osher]

По идее, это должно быть названо не App, а HomePage.

Answer 1

[Mikhail Osher]

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>
  );
}