javascript - خطای 'Property 'exact' does not exist on type 'IntrinsicAttributes & RouteProps'' در تایپاسکریپت?

من هنگام ایجاد مسیر خصوصی در تایپاسکریپت با خطایی مثل این مواجه میشوم، آیا کسی میتواند کمک کند؟

نوع '{ exact: true; render: (routerProps: RouterProps) => Element; }' قابل انتساب به نوع 'IntrinsicAttributes & RouteProps' نیست. ویژگی 'exact' در نوع 'IntrinsicAttributes & RouteProps' وجود ندارد.

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;

پاسخ شماره ۱

از یک اینترفیس props استفاده کنید که RouteComponentProps: را گسترش میدهد

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

interface ISignupPageProps extends RouteComponentProps {
  someProp: string;
}

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

یا اگر کامپوننت هیچ props ندارد، مستقیماً از RouteComponentProps استفاده کنید:

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

اعلان نوع شامل path و برخی ویژگیهای احتمالی دیگر بهصورت اختیاری است، بنابراین اگر آنها حذف شوند هیچ خطایی ایجاد نمیشود. برای مرجع، اینجا اعلان نوع آورده شده است (بخشی از تایپینگهای بالا در DefinitelyTyped)

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

این را امتحان کنید، امیدوارم مشکل شما را حل کند. برای اطلاعات بیشتر اینجا کلیک کنید

پاسخ شماره ۲

این خطا به دلیل ارتقاء بسته 'react' و به طور نسبی بسته 'react-router' به آخرین نسخه (در زمان پاسخ به این سوال 6.22.3) رخ میدهد.

ویژگیها در تگ <Route> بهروزرسانی شدهاند و برخی ویژگیهای قبلی مانند 'exact' حذف شدهاند.

export declare function Route(_props: RouteProps): React.ReactElement | null;
export interface RouterProps {
    basename?: string;
    children?: React.ReactNode;
    location: Partial<Location> | string;
    navigationType?: NavigationType;
    navigator: Navigator;
    static?: boolean;
    future?: Partial<Pick<FutureConfig, "v7_relativeSplatPath">>;
}

اگر به اعلان RouteProp نگاه کنید، هیچ prop exact وجود ندارد.

export declare function Outlet(props: OutletProps): React.ReactElement | null;
export interface PathRouteProps {
    caseSensitive?: NonIndexRouteObject["caseSensitive"];
    path?: NonIndexRouteObject["path"];
    id?: NonIndexRouteObject["id"];
    lazy?: LazyRouteFunction<NonIndexRouteObject>;
    loader?: NonIndexRouteObject["loader"];
    action?: NonIndexRouteObject["action"];
    hasErrorBoundary?: NonIndexRouteObject["hasErrorBoundary"];
    shouldRevalidate?: NonIndexRouteObject["shouldRevalidate"];
    handle?: NonIndexRouteObject["handle"];
    index?: false;
    children?: React.ReactNode;
    element?: React.ReactNode | null;
    hydrateFallbackElement?: React.ReactNode | null;
    errorElement?: React.ReactNode | null;
    Component?: React.ComponentType | null;
    HydrateFallback?: React.ComponentType | null;
    ErrorBoundary?: React.ComponentType | null;
}
export interface LayoutRouteProps extends PathRouteProps {
}
export interface IndexRouteProps {
    caseSensitive?: IndexRouteObject["caseSensitive"];
    path?: IndexRouteObject["path"];
    id?: IndexRouteObject["id"];
    lazy?: LazyRouteFunction<IndexRouteObject>;
    loader?: IndexRouteObject["loader"];
    action?: IndexRouteObject["action"];
    hasErrorBoundary?: IndexRouteObject["hasErrorBoundary"];
    shouldRevalidate?: IndexRouteObject["shouldRevalidate"];
    handle?: IndexRouteObject["handle"];
    index: true;
    children?: undefined;
    element?: React.ReactNode | null;
    hydrateFallbackElement?: React.ReactNode | null;
    errorElement?: React.ReactNode | null;
    Component?: React.ComponentType | null;
    HydrateFallback?: React.ComponentType | null;
    ErrorBoundary?: React.ComponentType | null;
}
export type RouteProps = PathRouteProps | LayoutRouteProps | IndexRouteProps;

همانطور که @Pawan پیشنهاد داد، این خصوصیت میتواند با خیال راحت حذف شود و این کار را عملی کند.