React + Typescript：复制自定义组件的道具 - React.PropsWithoutRef 对我不起作用

Question

我有一个组件可以包装Router并使用额外的道具。我尝试以PropsWithoutRef类似于此备忘单中使用的方式使用：

import React, { ComponentType, PropsWithoutRef } from 'react'
import { Route } from 'react-router'

type LayoutRouteProps = PropsWithoutRef<Route> & {
    component: ComponentType,
};


const DashboardLayoutRoute = ({
    component: Component,
    ...rest
}: LayoutRouteProps) => {
    const render = (props: any)=> <Component {...props} />

    return <Route {...rest} render={render} />
};

但这并没有什么好处。当我尝试使用DashboardLayoutRoute和传递与以下内容相关的道具时Route：

<DashboardLayoutRoute exact path='/' component={Home} />

我得到

错误:(63, 39) TS2322: 类型 '{ 精确：true; 路径：字符串；组件：任何；}' 不可分配给类型 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'。

属性 'exact' 不存在于类型 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'。

错误:(66, 39) TS2322: 输入 '{ path: string; 组件：任何；}' 不可分配给类型 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'。

属性“路径”不存在于类型“IntrinsicAttributes & Route & { component: ComponentType<{}>; }'。

我的代码有什么问题？

Answer 1

在同一个备忘单中进一步找到了解决方案！

从组件中提取 props 的正确方法不是 viaPropsWithoutRef而是 via React.ComponentProps(or React.ComponentPropsWithoutRef) 结合typeof：

import React, { ComponentType, ComponentProps } from 'react'
import { Route } from 'react-router'

type LayoutRouteProps = ComponentProps<typeof Route> & {
    component: ComponentType,
};

但正如 Mor Shemesh 在他的回答中指出的那样，最好在可以时导入类型：

import React, { ComponentType } from 'react'
import { Route, RouteProps } from 'react-router'


type LayoutRouteProps = RouterProps & {
    component: ComponentType,
};