React-Router V6 Routes Array Typescript

Question

我正在使用react-router V6，我在嵌套的子路由上得到一个typescript错误。我是Typescript的新手，所以我可能做得完全错误。有人能帮我一下吗?

错误消息

Type '{ path: string; element: JSX.Element; }' is not assignable to type 'ReactChildren'.

路径:Routes

const routes: { path: string, element: React.ReactChild, children: React.ReactChildren[] }[] = [
{
path: '/',
element: <FormPage title="Dashboard" />,
children: [
{ path: 'test-page', element: <p>Test page</p> }
]
}
]

Answer 1

不清楚你想要实现什么，这是useRoutes钩子的配置吗?

如果是，则类型为RouteObject[]，元素为ReactNode，参见下面的定义。

/**
* A route object represents a logical route, with (optionally) its child
* routes organized in a tree-like structure.
*/
export interface RouteObject {
caseSensitive?: boolean;
children?: RouteObject[];
element?: React.ReactNode;
index?: boolean;
path?: string;
}
/**
* Returns the element of the route that matched the current location, prepared
* with the correct context to render the remainder of the route tree. Route
* elements in the tree must render an <Outlet> to render their child route's
* element.
*
* @see https://reactrouter.com/docs/en/v6/api#useroutes
*/
export declare function useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null;