mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-06 17:46:23 +00:00
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).
This commit is contained in:
+5
-1
@@ -57,8 +57,12 @@ export function PageTransition(props: PageTransitionProps) {
|
|||||||
|
|
||||||
export function AnimatedOutlet() {
|
export function AnimatedOutlet() {
|
||||||
const shouldReduce = useReducedMotion()
|
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({
|
const routeKey = useRouterState({
|
||||||
select: (s) => s.location.pathname,
|
select: (s) => s.matches.at(-1)?.routeId ?? s.location.pathname,
|
||||||
})
|
})
|
||||||
|
|
||||||
if (shouldReduce) {
|
if (shouldReduce) {
|
||||||
|
|||||||
Reference in New Issue
Block a user