JAVASCRIPT

A is only ever to be used as the child of element"

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Page1 = () => {
  return <div>Page1</div>;
};
const Page2 = () => {
  return (
    <div>
      Page2<button>Click Me</button>
    </div>
  );
};
const App = () => {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
};
export default App;

A is only ever to be used as the child of

import { render } from "react-dom";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

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