[Bug]: loader of Route running even if Route / Router is not rendered

[Robstei]

What version of React Router are you using?

6.22.3

Steps to Reproduce

Define a route with a loader before using an early return which is supposed to not render the router(#11205 (comment), https://reactrouter.com/en/main/route/loader#loader).

Go to "/" and get redirected to "/redirect".

Reproduction:
https://stackblitz.com/edit/github-gde4bp?file=src%2Fapp.tsx

Expected Behavior

Since loaders are executet before a is rendered i would asume that the loader is not executed and no redirect would happen.

Actual Behavior

Loader gets executed and redirect does happen.

[timdorr]

This isn't stopping the root route from rendering in any way (outside of your example having an early return statement). So, the / route matches and then that load redirects to /redirect as expected. I'm not seeing how this behavior is unexpected in your example.

[Robstei]

Thanks for the fast response @Timdor

The issue might be flawed understanding of react. I thought "rendering an element" in regards to react means "adding the element to the virtual DOM".

Due to returning on line 29 I thought the <Routprovider/> and therefore the <Route/> elements are never "rendered".

  return 'router not rendered';
  return <RouterProvider router={router} fallbackElement={<p>Loading...</p>} />;

Does "rendering an element" just mean creating it i the sense that the following code "renders" a div?

const myDiv = <div/> 

In that case the creation of the element in the following code from the reproduction "renders" the route regardless of what the component acutally adds to the DOM, right?

  let router = createBrowserRouter(
    createRoutesFromChildren(
      <>
        <Route
          path="/"
          element={'home'}
          loader={() => {
            throw redirect('redirect');
          }}
        >
          home
        </Route>
        <Route path="/redirect" element={'redirect'}></Route>
      </>
    )
  );