Functions are not valid as a React child. This may

站长
· 阅读数 343
这种情况主要发生在React-Router V6 的Route定义中,或者组件的加工与使用。
根据报错信息我们可以得知我们需要使用<Component/>的方式进行组件的使用,而不是Component,这样的话React会认为我们在调用函数,而不是使用组件。
如果你是在Router V6定义路由时发生的报错,应该参考以下代码:
} />
而不是:
//React会认为你传递了一个函数
当然在其他时候使用也是一样的,如果参数需要你传递组件或者JSX,你大概率是直接传递了(Component)而不是<Component/>,将函数改为组件即可如果你是在使用useRoutes进行路由懒加载时遇到这个报错,可以参考这两段代码:
类似Vue的路由懒加载,使用()=>import()引入然后map一下转为lazy(()=>import()),最后使用useRoute转为组件,在APP中使用
list.ts(路由列表)
import { lazy } from "react";
import type { FC,LazyExoticComponent } from "react";
const RouterList: RouterListType[] = [
{
path: "",
element: lazy(() => import("@/layout/Base")),
children: [
{
path: "/",
element: lazy(() => import("@/page/index")),
},
{
path: "/article/write",
element: lazy(() => import("@/page/article/write")),
},
{
path: "/article/list",
element:lazy(() => import("@/page/article/list")),
},
],
},
];
export default RouterList;
interface RouterListType {
path: string;
element: LazyExoticComponent>;
children?: RouterListType[];
}
export type { RouterListType };
switch.tsx(将list.ts中的内容嵌套Suspense)
import { lazy, Suspense, memo } from "react";
import { RouteObject, useRoutes } from "react-router";
import RouterList from "./list";
import type { RouterListType } from "./list";
const SetRouter = (list: RouterListType[]): RouteObject[] => {
let mRouteTable: RouteObject[] = [];
list.forEach(route => {
mRouteTable.push({
path: route.path,
element: (
路由加载ing...
index.tsx(使用编译好的Router组件)
import { BrowserRouter } from "react-router-dom";
import Router from './Switch';
function RouterHub() {
return (
);
}
export default RouterHub;
然后直接放到<APP/>包裹就可以了