reactjsreact-routertypescript3.0

How to fix Type not assignable to LibraryManagedAttributes for react router render prop


I recently updated all react libraries to the latest and all of its typings. I am facing an issue with typescript compilation. It is saying

[ts] Type '{ history: History<any>; location: Location<any>; match: match<any>; staticContext?: StaticContext; }' is not assignable to type 'LibraryManagedAttributes<T["component"], Readonly<{ children?: ReactNode; }> & Readonly<{ history: History<any>; location: Location<any>; match: match<any>; staticContext?: StaticContext; }>>'. [2322]
type PrivateRouteProps = UserAuthStore.UserAuthState &
    typeof UserAuthStore.actionCreators &
    RouteProps &
    { component: typeof React.Component };

class PrivateRoute<T extends PrivateRouteProps = PrivateRouteProps> extends React.Component<T, {}> {


    render() {

        let auth = new Auth();

        const {
            isAuthenticated,
            component: Component,
            ...props
        } = this.props

        if (!isAuthenticated) {
            console.log(this.props)
            window.location.href = auth.getAuthorizeUrl(this.props.location!.pathname!)
        }        

        return (
            <Route
                {...props}
                render={props => isAuthenticated ? <Component {...props} />: (<div>Redirecting...</div>)}
            />
        )
    }
}

I am getting error at <Component {...props} /> on "Component".


Solution

  • I removed Component from destruction and casted type like this

    const Component = this.props.component as React.ComponentType<{} & RouteComponentProps<{}>>;

    This worked for me. I read it from here. https://github.com/DefinitelyTyped/DefinitelyTyped/issues/17355#issuecomment-310544041