TanStackT
TanStack•15mo ago•
13 replies
faint-white

I can't get the scroll restoration to work on my app. Someone can help me please?

Hello, I am building an App with Tauri, in the frontend I have React with Vite. I added the TanStack router and for now it works pretty good. But I can't make the scroll restoration works and I don't know what else to do.

I was looking the SessionStore and I have something like this:
{"cached":{"/today___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":56},"/___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":560},"/feeds/7___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":1904},"/articles/282___html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":4400}},"next":{"html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":null,"scrollY":null}}}


So I suppose the ScrollRestoration component detect the position and save it but fails when have to scroll?

I added it in my 
__root.tsx
 file:

import { createRootRoute, Outlet, ScrollRestoration } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import ApplicationLayout from "../components/layout/ApplicationLayout";
import { NextUIProvider } from "@nextui-org/react";

export const Route = createRootRoute({
  component: () => (
    <>
      <ScrollRestoration getKey={(location) => location.pathname} />
      <NextUIProvider>
        <ApplicationLayout>
          <Outlet />
        </ApplicationLayout>
      </NextUIProvider>
      <TanStackRouterDevtools />
    </>
  ),
});


Also, I dont know if this is a problem but I am using react-infinite-scroll-component. Evert
Was this page helpful?