在反应中，我创建了包装器组件。所以现在我需要在我的 app.tsx 中的元素参数中使用它们，该参数位于路由标记中。但是错误不是 jsx elem

Question

'Catalog' cannot be used as a JSX component. Its return type 'CatalogState' is not a valid JSX element. Type 'CatalogState' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2786)

here catalog is my wrapper component THIS IS THE ROUTE PART WHERE I AM USING CATALOG AS A WRAPPER COMPONENT

<Routes>
       {/* <Route path={BASE}/></Catalog> */}
        {/* <Route path={BASE} element={<PrimeCatalogContainer/>} /> */}
        <Route path={BASE} element={()=>(<Catalog><PrimeCatalogContainer/></Catalog>)}/>
        <Route path={PRIME_CATALOG} 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>

CATALOG COMPONENT

import { PrimeCatalogContainer } from "./almLib";
const Catalog = () =>{
  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/>
     </div>
    </>
  );
};

instead of above catalogcomponent I tried below one also

import { PrimeCatalogContainer } from "./almLib";
  function Catalog (): 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/></div>
    );
 };

Answer 1

As stated in the docs , element should be a ReactNode, so instead of:

<Route path={BASE} element={()=>(<Catalog><PrimeCatalogContainer/></Catalog>)}/>

you need to return the actual Catalog

<Route path={BASE} element={<Catalog><PrimeCatalogContainer/></Catalog>}/>