Scroll to top on navigation with data browser router.

[rohitpotato]

How can i ensure that every page starts from the top on navigation? I am not using nested routes.

On each navigation, the page starts from the scroll position on the previous page. What I want to achieve is, each page starts with the top?

I think I might not be understanding the ScrollRestoration component correctly I guess?

Just for reference, this is how my routes look:

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    loader: () => {
      return defer({
        homePageData: homePageLoader(queryClient)(),
      });
    },
    errorElement: <FullScreenError />,
  },
  {
    path: '/support/:nodeId',
    element: <Support />,
    errorElement: <FullScreenError />,
    loader: ({ params }) => {
      return defer({
        transactionPlusCTData: transactionViewPlusCTLoader(queryClient)({
          nodeId: params.nodeId,
        }),
      });
    },
  },
  {
    path: '/support/article/:nodeId/:collectionName/:articleId',
    async lazy() {
      const ArticleRoute = await import('../pages/article');
      return {
        Component: ArticleRoute.default,
      };
    },
    loader: ({ params }) => {
      return defer({
        articleData: articleLoader(queryClient)({
          articleId: params.articleId!,
          collectionName: params.collectionName!,
        }),
      });
    },
    errorElement: <FullScreenError />,
  },
 ])