Commit 759ab6bb by feitianbubu Committed by GitHub

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).
parent 1f4d8d2b
......@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment