已设置key prop仍触发React key报错，仅首页出现Rendered Route错误

问题分析 #

从代码和错误提示来看，错误根源有两处：

1. Index组件的语法错误（自动分号插入导致返回undefined） #

在page.posts.map的回调里，return后直接换行触发了JavaScript的自动分号插入（ASI），导致实际返回undefined，<li>元素并未被正确返回。这会让React渲染时出现异常，进而触发key相关的错误提示。

2. Layout组件的结构不一致导致路由组件重挂载 #

当useQuery的data加载完成前后，Layout返回的JSX结构完全不同：

• 有data时：Fragment包裹UserContext.Provider，内部包含Navbar和Outlet
• 无data时：Fragment直接包裹Navbar和Outlet

React会将这两种结构视为完全不同的组件树，导致原有的Navbar和Outlet被卸载，再重新渲染Provider内的Navbar和Outlet。这种强制重挂载会引发路由组件（首页Index）的异常，对应错误提示里的"Rendered Route"问题。

修复步骤 #

第一步：修复Index组件的语法错误 #

将return与<li>放在同一行，或用括号包裹返回的JSX，避免ASI问题：

{page.posts.map((ele) => {
  return (
    <li key={ele.id}>
      <PostCard
        cardType=""
        likedBy={ele.likedBy}
        liked={ele.likedBy.some((e) => e.id == user.id)}
        author={ele.author}
        comments={ele._count.comments > 0 ? ele._count.comments : 0}
        community={ele.community}
        refetch={refetch}
        content={ele.content}
        id={ele.id}
        likeCount={ele._count.likedBy}
        title={ele.title}
        type={ele.type}
      />
    </li>
  )
})}

注意：PostCard作为<li>的唯一子元素，不需要额外设置key，key只需要在列表的直接子元素（这里是<li>）上设置即可。

第二步：统一Layout组件的结构 #

无论data是否存在，都保持UserContext.Provider的包裹结构，仅调整value的取值：

const Layout: FC = () => {
  const { data } = useQuery<response>(
    "authData",
    {
      queryFn: () => axios.get(`/api/auth/user`),
      retry: false,
      refetchOnWindowFocus: false
    }
  )

  return (
    <UserContext.Provider value={data?.data ?? null}>
      <Navbar/>
      <Outlet />
    </UserContext.Provider>
  );
};

这样React在更新时只会修改Provider的value，不会卸载/重挂载Navbar和Outlet，避免路由组件的异常。

第三步：优化列表key（可选但推荐） #

将flatMap中<ul>的key从i（index）改为page的唯一标识（比如page的nextId或后端返回的pageId），避免因页面顺序变化导致的key不稳定：

{data.pages.flatMap((page) => {
  return (
    <ul className="flex flex-col gap-2" key={page.nextId || page.someUniqueId}>
      {/* ... 内部map逻辑 */}
    </ul>
  )
})}

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