Remix 1.7.2嵌套路由异常：二级路由组件被多次渲染

针对你在Remix 1.7.2中遇到的两层嵌套路由下，点击父路由pages.tsx的Link后，二级路由$pagesId.tsx内子组件多次渲染的问题，可尝试以下排查和解决步骤：

1. 用React.memo缓存纯子组件 #

如果子组件是纯组件（仅依赖props渲染，无内部状态或副作用），用React.memo包裹它，避免父组件重渲染时触发子组件不必要的重复渲染：

import { memo } from 'react';

const YourChildComponent = memo(() => {
  console.log('子组件渲染');
  return <div>子组件内容</div>;
});

export default function PagesId() {
  return <YourChildComponent />;
}

2. 排查父路由pages.tsx的重渲染原因 #

检查pages.tsx是否存在不必要的状态更新、无依赖的useEffect或频繁变化的props，这些会导致父组件重渲染，进而触发Outlet内的子组件跟着渲染。比如避免在父组件中每次渲染生成新的对象/函数作为props传递给子路由组件。

3. 验证路由Loader的执行频率 #

如果$pagesId.tsx配置了loader函数，添加日志检查是否被多次调用。Remix默认会缓存loader结果，若loader依赖参数无变化却重复执行，需检查loader的依赖项是否正确，比如是否误用了不稳定的变量作为loader的参数。

4. 规范Link组件的使用方式 #

确保pages.tsx中Link的to属性引用稳定，避免每次渲染生成新的对象导致Link重渲染甚至多次触发路由跳转：

// 推荐写法：使用字符串路径，保持引用稳定
<Link to={`/pages/${pageId}`}>跳转至详情页</Link>

// 避免写法：每次渲染生成新的对象
<Link to={{ pathname: `/pages/${pageId}` }}>跳转至详情页</Link>

5. 升级Remix版本 #

Remix 1.7.2属于较早版本，后续版本修复了不少路由渲染相关的bug。建议升级到1.x系列的最新稳定版，或迁移至Remix v2（需参考官方迁移文档），大概率能解决这类渲染异常问题。

内容的提问来源于stack exchange，提问作者kibbio