React + Typescript: copying props of a custom component - React.PropsWithoutRef doesn't work for me

Question

I have a component that wraps Router and takes an additional props. I tried using PropsWithoutRef in a way that's analogous to the use in this cheatsheet:

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} />
};

But it did no good. When I try to use DashboardLayoutRoute and pass props relevant to Route:

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

I get

Error:(63, 39) TS2322: Type '{ exact: true; path: string; component: any; }' is not assignable to type 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'.

Property 'exact' does not exist on type 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'.

Error:(66, 39) TS2322: Type '{ path: string; component: any; }' is not assignable to type 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'.

Property 'path' does not exist on type 'IntrinsicAttributes & Route & { component: ComponentType<{}>; }'.

What's wrong with my code?

Answer 1

Found the solution further in the same cheatsheet!

The correct way to extract props from a component is not via PropsWithoutRef but via React.ComponentProps (or React.ComponentPropsWithoutRef) in combination with typeof:

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

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

But as Mor Shemesh pointed out in his answer, it's probably better to import the type instead when you can:

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


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