React路由使用Catalog包装组件报非有效JSX元素ts(2786)错误

• React Router v6的Route组件element属性只接受直接传入的JSX元素，不支持传入组件函数。你当前写法element={()=>(<Catalog><PrimeCatalogContainer/></Catalog>)}是把箭头函数传给了element，React Router不会执行这个函数渲染内容，会直接把函数本身作为元素做类型校验，直接触发类型不匹配错误。
• 你编写的Catalog组件没有声明接收children属性，当前组件内部硬编码了PrimeCatalogContainer，如果要作为包装组件包裹自定义子内容，必须接收children参数并渲染，否则外层传入的子节点不会生效。
• 报错提示返回类型为CatalogState，大概率是项目中存在同名的Catalog变量、类型或接口，和组件命名冲突，导致TypeScript错误推导了组件的返回值类型。

1. 改造Catalog为合法包装组件 #

作为包装组件需要接收children属性，参考如下写法：

import { ReactNode } from 'react';
import { PrimeCatalogContainer } from "./almLib";

// 定义组件Props，声明接收children
interface CatalogProps {
  children?: ReactNode;
}

function Catalog({ children }: CatalogProps): JSX.Element {
  return (
    <div
      className="catalog__container"
      data-show-filters="true"
      data-show-search="true"
      data-catalogs="true"
      data-lo-types="true"
      data-skill-name="true"
      data-lo-format="true"
      data-duration="true"
      data-price="true"
      data-skills-level="true"
      data-learner-state="true"
      data-tag-name="true"
      data-skill-level="true"
    >
      {/* 如果不需要固定渲染PrimeCatalogContainer，仅作为布局容器用，删掉下行即可 */}
      <PrimeCatalogContainer />
      {/* 渲染外部传入的子内容 */}
      {children}
    </div>
  );
}

export default Catalog;

注意：如果保留组件内部硬编码的PrimeCatalogContainer，路由中再传入同名组件会导致重复渲染，可根据业务需求二选一。

2. 修正路由的element传值 #

去掉包裹的箭头函数，直接传入JSX元素即可：

<Routes>
  <Route 
    path={BASE} 
    element={
      <Catalog>
        <PrimeCatalogContainer/>
      </Catalog>
    }
  />
  <Route path={PRIME_CATALOG} element={<PrimeCatalogContainer />} />
  <Route path={PRIME_TRAINING} element={<PrimeCatalogContainer />} />
  <Route path={PRIME_TRAINING} element={<PrimeTrainingPage />} />
  <Route path={PRIME_INSTANCE} element={<PrimeInstancePage />} />
  <Route path={PRIME_ALMPROFILE} element={<ALMProfilePage />} />
  <Route 
    path={PRIME_BOARDPAGE}
    element={<PrimeCommunityBoardPage />}
  />
  <Route
    path={PRIME_BOARDLIST}
    element={<PrimeCommunityBoardList />}
  />
</Routes>

3. 残留报错排查 #

如果修改完上述内容仍提示返回类型为CatalogState，按以下顺序排查：

• 检查Catalog组件的导入语句，确认没有导入同名的状态变量、类型定义或其他非组件内容
• 检查全局类型声明文件，确认没有错误覆盖JSX.Element的原生类型定义
• 重启TypeScript服务，删除node_modules后重新安装依赖排除缓存问题

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