防止 TanStack Router 在路由更改时重新挂载整个组件树

Question

我有一些路线，例如：

/user/$userId/profile/
/user/$userId/history/
/user/$userId/ranking/
...

所有这些都呈现相同的“选项卡”组件，您可以使用它在这些路线之间导航，仅更改选择的选项卡。

当选项卡从一个选项卡更改为另一个选项卡时，该组件有一个动画。 当我使用 ReactRouter 时，该库不会重新挂载先前组件树中存在的组件，并且动画效果完美。

但是，TanStack Router 可能会在路由导航过程中更改某些组件键，从头开始重新挂载整个组件树，从而破坏动画。

有没有办法可以防止这种行为并重用 /profile、/history 等中的先前组件树来保留此动画？

Answer 1

我发现这是 TanStack Router 上的一个错误，他们使用路由作为顶部元素的键。我向他们建议了这一点，然后他们为我修复了它，现在它的表现如我所愿。