Example application for the route loader behaviour bug

app.js

import {
  createBrowserRouter,
  Outlet,
  Link,
  RouterProvider,
  useLoaderData,
  useNavigate
} from 'react-router-dom';

function recordLoaderInvocation(routeName) {
  console.log(" loader(", routeName, ")");
  return routeName;
}

function useNavigateWithConsoleLog() {
  const navigate = useNavigate();
  return (args) => {
    console.log("navigate(", args, ") >");
    navigate(args);
  }
}

function RootRoute() {
  const navigate = useNavigateWithConsoleLog();
  return <div>
    <h1>Root</h1>
      <button onClick={()=>navigate({pathname: "children/1"})}>Child1</button>
      <button onClick={()=>navigate({pathname: "children/2"})}>Child2</button>
      <button onClick={()=>navigate({pathname: "children/1", search: "?foo=bar"})}>Child1 w/ search</button>
      <button onClick={()=>navigate({pathname: "children/2", search: "?foo=bar"})}>Child2 w/ search</button>
    <Outlet/>
  </div>;
}

const routes = [
  {
    path: "/",
    loader: () => recordLoaderInvocation("root"),
    element: <RootRoute/>,

    children: [
      {
        path: "children",
        loader: () => recordLoaderInvocation("children"),
        element: <>
          <h2>Children</h2>
          <Link to="..">back to root</Link>
          <Outlet/>
        </>,
        children: [
          {
            path: ":childid",
            loader: ({params}) => recordLoaderInvocation(`child ${params.childid}`),
            element: <ChildRoute/>
          }
        ]
      }
    ]
  }
]

function ChildRoute() {
  return <h3>I am {useLoaderData()}</h3>
}

function App() {
  return <RouterProvider router={createBrowserRouter(routes)}/>
}

export default App;