When I click on an internal LINK for a subpage it reload the entire page

[Shackey666]

Hello,

I am using react router in an electron project. It is set up like this:

  const router = createHashRouter([
    {
      element: <AppLayout />,
      loader: appLayoutLoader,
      children: [
        {
          path: ROUTES.HOME,
          index: true,
          element: isLoggedIn() ? <Navigate to={DEFAULT_ROUTE_PAGE} /> : <Navigate to={ROUTES.SIGN_IN} />,
        },
        {
          element: <ProtectedRoutes />,
          children: [
            {
              element: <PageLayout />,
              children: [
                {
                  index: true,
                  loader: () => redirect(DEFAULT_ROUTE_PAGE),
                },
                {
                  path: /pages/:id'',
                  element: <Page />,
                  loader: pageLoader(),
                },
              ],
            }
          ],
        },
        {
          path: ROUTES.SIGN_IN,
          element: <SignInLayout />,
          loader: signInLayoutLoader(),
          children: [
            {
              index: true,
              element: <SignIn />,
            }
          ],
        },
      ],
    },
  ]);

When I use the LINK component from react-router inside my page component.

          <Link
            to={`page/${page.id}`}
          />

The appLayoutLoader is launched again (like a re-render) at each 'click' on the link. Why?
I thought that internal Link will only reload the page loader not the AppLayoutLoader.

What am I doing wrong?

Thanks for your help!

[josemlrod]

did you find a solution to this issue?

[PuruVJ]

Bump: having same issue