TypeScript-Fehler nach dem Upgrade von Version 4 useParams () von React-Router-Dom Eigenschaft „sumParams“ existiert nicht auf Typ „{}“

Ich erhalte einen TypeScript-Fehler nach dem Upgrade auf Version 4 Wird in useParams () von React-Router-Dom verwendet

"typescript": "^4.0.2"

import { useParams } from 'react-router-dom';

const { sumParams } = useParams();

Property 'sumParams' does not exist on type '{}'. 

Das Projekt hat super funktioniert und erst nach dem Upgrade wirft es einen Fehler

useParams ist generisch. Sie müssen Typoskript mitteilen, welche Parameter Sie verwenden, indem Sie den Wert des Generikums angeben

Es gibt mehrere Möglichkeiten, dies zu lösen

Das ist mein Lieblingsweg

const { sumParams } = useParams<{ sumParams: string }>();

Aber es gibt noch ein paar mehr Möglichkeiten (:

ODER

interface ParamTypes {
  sumParams: string;
}

Dann in Ihrer Komponente

const { sumParams } = useParams<ParamTypes>();

ODER

fügen Sie einen beliebigen Typ ohne Schnittstelle hinzu

const { sumParams } : any = useParams();

Hinweis: Auf diese Weise können Sie es nicht als Zeichenfolge festlegen

ODER

Weitere Optionen für keemor:

const { sumParams } = useParams() as { 
  sumParams: string;
}

Eine weitere Option ist:

const { sumParams } = useParams() as { 
  sumParams: string;
}

Damit es wie zuvor funktioniert, fügen Sie einfach “:any” hinzu

const { sumParams } : any = useParams();

Bei neueren Versionen des Routers wird Generic von Object zu Union of Strings geändert.

const { param1, param2 } = useParams<'param1' | 'param2'>();

Aktuell useParams tippe die ein react-router Typen sieht so aus:

export declare function useParams<Key extends string = string>(): Readonly<Params<Key>>;

type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

Dies wäre der saubere Ansatz

oder

const { sumParams } = useParams<{[key: string] : string}>()

Mit diesem Ansatz können Sie beliebig viele Parameter abrufen, ohne sie einzeln deklarieren zu müssen

Sie können auch auf die zugreifen params aus useRouteMatch wenn Sie es bereits in Ihre Datei importiert haben

const curRoute = useRouteMatch();
// @ts-ignore
let sumParams  = curRoute.params.sumParams