导致多重呈现的Remix.run嵌套路由

Question

再:混合版本- 1.7.2

我在一个香草混合应用程序中设置了两个层次的嵌套路由。对于第二级路由，单击“链接”可多次呈现子组件。我的理解是，混合只会使必要的子组件只呈现一次。

下面是嵌套的文件结构：

.
├── entry.client.tsx
├── entry.server.tsx
├── root.tsx
└── routes
    ├── index.tsx
    ├── pages
    │   ├── $pagesId.tsx
    │   └── index.tsx
    └── pages.tsx

每次单击父$pagesId.tsx中的链接路由时，都会多次调用pages.tsx中的子组件。

下面是对这种行为的简短屏幕记录- https://imgur.com/a/3BR1ll4

下面是运行应用程序https://stackblitz.com/edit/node-1zuqsu?file=app%2Froutes%2Fpages%2F%24pagesId.tsx示例的stackblitz

谢谢。

Answer 1

如果您添加了useTransition钩子，您将看到为什么Remix要重新呈现您的路由。根据需要重新呈现你的应用程序。Remix正在更新它的根上下文，它通过路由过滤。记住，重新渲染并不意味着重新油漆。所以除非你的渲染速度很慢，否则我不会太担心。

为了说明清楚，我在两个空闲状态之间单击。

idle -> loading -> idle | click | idle -> loading -> idle

​

​