From 759ab6bbca57074d85822f6e31b9332b383d3552 Mon Sep 17 00:00:00 2001 From: feitianbubu Date: Thu, 2 Jul 2026 21:36:23 +0800 Subject: [PATCH] fix: keep page state when switching tabs within the same route (#5796) AnimatedOutlet keyed its motion container by the full pathname, so navigating between params of the same route (e.g. the dashboard tabs under /dashboard/$section) changed the key and remounted the route component, discarding its in-memory state. The most visible symptom: the dashboard time range resets to the default every time you switch sub-tabs (Model Analytics / Flow / User Analytics). Key the transition by the matched route id instead, so param-only navigation re-renders in place while real page-to-page navigation still plays the enter animation. This also preserves state across the other $section tab pages (usage logs, models, system settings). --- web/default/src/components/page-transition.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/default/src/components/page-transition.tsx b/web/default/src/components/page-transition.tsx index 9c90951d..ffd44d9b 100644 --- a/web/default/src/components/page-transition.tsx +++ b/web/default/src/components/page-transition.tsx @@ -57,8 +57,12 @@ export function PageTransition(props: PageTransitionProps) { export function AnimatedOutlet() { const shouldReduce = useReducedMotion() + // Key the page transition by the matched route id, not the resolved pathname. + // Navigating between params of the same route (e.g. dashboard tabs served by + // /dashboard/$section) then re-renders in place instead of remounting the + // route component and discarding its state (such as the selected time range). const routeKey = useRouterState({ - select: (s) => s.location.pathname, + select: (s) => s.matches.at(-1)?.routeId ?? s.location.pathname, }) if (shouldReduce) {