类型 \'IntrinsicAttributes & RouteProps\' 上不存在属性 \'exact\' 打字稿中的错误？答案

【问题标题】：Property 'exact' does not exist on type 'IntrinsicAttributes & RouteProps' Error in typescript?类型 \'IntrinsicAttributes & RouteProps\' 上不存在属性 \'exact\' 打字稿中的错误？
【发布时间】：2022-11-14 13:47:16
【问题描述】：

我在打字稿中创建私有路由时遇到这样的错误有人可以帮忙吗？输入'{精确：真；渲染：（routerProps：RouterProps）=>元素； }' 不可分配给类型 'IntrinsicAttributes & RouteProps'。类型“IntrinsicAttributes & RouteProps”上不存在属性“exact”。

import React, { Suspense } from "react";
import { Route, Routes, RouterProps, useLocation, Navigate } from "react-router-dom";


interface RenderRouteProps extends RouterProps {}

const RenderRoute: React.FC<CustomRoute> = props => {
    const { component } = props;
    const Component: React.ComponentType<RenderRouteProps> = component!
    
    return (
        <Route exact render={(routerProps: RouterProps) => <Component {...routerProps} {...props} />}/>
    );
};

const PrivateRoute = (props: PrivateRouteProps & {redirectPath?: RouteRedirectProps, animate?: boolean}) => {
    const location = useLocation();
    const { appRoutes, redirectPath } = props;

    return (
        <Suspense>
            <Routes location={location}>
                {appRoutes.map((route, index) => (
                    <RenderRoute key={index} {...route} />
                ))}
                {redirectPath?.length && redirectPath.map((path, index) => (
                    path && <Navigate to={path.to} key={index} />
                ))}
            </Routes>
        </Suspense>
    )
};

export default PrivateRoute;

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

使用扩展 RouteComponentProps: 的 props 接口

 import { RouteComponentProps } from '@reach/router';

interface ISignupPageProps extends RouteComponentProps {
  someProp: string;
}

class SignupPage extends React.Component<ISignupPageProps> {
  // ...
}

或者如果组件没有任何道具，请直接使用RouteComponentProps：

   class SignupPage extends React.Component<RouteComponentProps> {
  // ...
}

类型声明包括path 和一些其他潜在的可选属性，因此如果省略它们不会导致任何错误。作为参考，这里是类型声明（上述类型声明的一部分）

export type RouteComponentProps<TParams = {}> = Partial<TParams> & {
    path?: string;
    default?: boolean;
    location?: WindowLocation;
    navigate?: NavigateFn;
    uri?: string;
};

试试这个希望它能解决你的问题。更多信息请点击here

【讨论】：