Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react-router): fix issue with scroll restoration #3918

Merged
merged 2 commits into from
Apr 7, 2025

Conversation

denys-isaichenko
Copy link
Contributor

@denys-isaichenko denys-isaichenko commented Apr 2, 2025

fixes #3680

It seems like resolvedLocation does not always point to the latest location state in the ref callback; sometimes it points to the previous location and onRendered is not triggered.

@@ -113,10 +113,10 @@ export const Match = React.memo(function MatchImpl({
</ResolvedCatchBoundary>
</ResolvedSuspenseBoundary>
</matchContext.Provider>
{parentRouteId === rootRouteId && router.options.scrollRestoration ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change is a bit problematic

see

#3469

#3874

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schiller-manuel It's just a bit strange that if I don't enable scrollRestoration, I won't be able to subscribe to onRendered router events. From my perspective, those shouldn't be connected. I'm not sure what the best solution here is. Maybe it can be just useEffect since we don't need to have access to DOM. What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you need this event for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@schiller-manuel I don't use it in my projects, but if it's listed in API documentation, people might use it to run some side effects. It is not obvious that it only works if scrollRestoration is enabled. Also in the Solid version of the router it is not connected to the scrollRestoration feature.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think it's just meant as an internal event really. so for now please dont apply this change until we clarify this.

Copy link

nx-cloud bot commented Apr 2, 2025

View your CI Pipeline Execution ↗ for commit 4fa1f74.

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 4m 18s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 2m 3s View ↗

☁️ Nx Cloud last updated this comment at 2025-04-02 20:17:24 UTC

Copy link

pkg-pr-new bot commented Apr 2, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@3918

@tanstack/create-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/create-router@3918

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@3918

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@3918

@tanstack/create-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/create-start@3918

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@3918

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@3918

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@3918

@tanstack/react-router-with-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-with-query@3918

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@3918

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@3918

@tanstack/react-start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-config@3918

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@3918

@tanstack/react-start-router-manifest

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-router-manifest@3918

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@3918

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@3918

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@3918

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@3918

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@3918

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@3918

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@3918

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@3918

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@3918

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@3918

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@3918

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@3918

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@3918

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@3918

@tanstack/solid-start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-config@3918

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@3918

@tanstack/solid-start-router-manifest

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-router-manifest@3918

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@3918

@tanstack/start

npm i https://pkg.pr.new/TanStack/router/@tanstack/start@3918

@tanstack/start-api-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-api-routes@3918

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@3918

@tanstack/start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-config@3918

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@3918

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@3918

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@3918

@tanstack/start-server-functions-handler

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-handler@3918

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@3918

@tanstack/start-server-functions-ssr

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-ssr@3918

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@3918

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@3918

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@3918

commit: 4fa1f74

@schiller-manuel schiller-manuel changed the title fix(react-router): fix issue with scroll restoration, move ScrollRestoration component behind the flag fix(react-router): fix issue with scroll restoration Apr 7, 2025
@schiller-manuel schiller-manuel merged commit 9bd706c into TanStack:main Apr 7, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

scrollRestoration not working the first time
2 participants