...(index.tsx)
const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

render(() => <App />, root);
... (app.tsx)
function App() {
  return (
    <Router root={MainLayout}>

      <Route path="/" component={TestComponent} />
      <Route path="/cart" component={TestComponent} />
    </Router>
  );
}
function TestComponent(props: any){
  let name = props.name ? props.name : 'Component'
  console.log(name)
  return (
<main class="mb-auto h-10 bg-green-500">{name}</main>

  )
}
...
// Code that breaks
... index2.tsx

const elem: Element = document.getElementById("root")

render(() => (
  <Router root={MainLayout}>
    <Route path="/" component={MainLayout}>

      <Route path="/cart" component={Cart} />
      <Route path="/" component={TestComponent} />
      <Route path="*404" component={()=>(<TestComponent name='not found'/>)} />
    </Route>
  </Router>
), elem);


  function Cart() {
    return (
      <div class="p-4 grid">
  
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      </div>
    )
  }

...(index.tsx)
const root = document.getElementById('root');

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
  );
}

render(() => <App />, root);
... (app.tsx)
function App() {
  return (
    <Router root={MainLayout}>

      <Route path="/" component={TestComponent} />
      <Route path="/cart" component={TestComponent} />
    </Router>
  );
}
function TestComponent(props: any){
  let name = props.name ? props.name : 'Component'
  console.log(name)
  return (
<main class="mb-auto h-10 bg-green-500">{name}</main>

  )
}
...
// Code that breaks
... index2.tsx

const elem: Element = document.getElementById("root")

render(() => (
  <Router root={MainLayout}>
    <Route path="/" component={MainLayout}>

      <Route path="/cart" component={Cart} />
      <Route path="/" component={TestComponent} />
      <Route path="*404" component={()=>(<TestComponent name='not found'/>)} />
    </Route>
  </Router>
), elem);


  function Cart() {
    return (
      <div class="p-4 grid">
  
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      <TestComponent name='cart'/>
      </div>
    )
  }