reactjs - Vlastnost neexistuje ve stavu - Používání React Router hooků s TypeScriptem

Mám nějaké problémy při používání hooků react-router-dom s TypeScriptem.

Pokusy o přístup k nějaké vlastnosti stavu by vyvolaly chybu s tím, že neexistuje

Odkazujte na:

Jedním z řešení, které jsem musel použít, abych mohl pokračovat ve vývoji, bylo přetypovat to na any

 const location = useLocation() as any;

Jak mohu předat platné rozhraní generiku useLocation, abych mohl přistupovat k vlastnostem stavu bez varování?

  useDidMount(() => {
    if (location.state?.newTransactions) {
      scroll.scrollToBottom();
    }
  });

Odpověď č. 1

useLocation přijímá generický parametr, který určuje typ vlastnosti state, takže:

const location = useLocation<YourStateTypeHere>();

Například:

interface LocationState {
    newTransactions?: boolean;
}

// ...
const location = useLocation<LocationState>();

// ...
useDidMount(() => {
    if (location.state?.newTransactions) {
        scroll.scrollToBottom();
    }
});

Jak jsem se tam dostal (protože jsem to předtím nepoužíval), pro případ, že by to bylo užitečné: Vím, že TypeScriptová vazba pro většinu hooků implementuje alespoň jeden generický parametr, takže když jsem viděl, že location v React Routeru zahrnuje stav definovaný programátorem, předpokládal jsem, že pravděpodobně jeden přijímá. Takže jsem otevřel projekt, kde používám React Router a TypeScript, a najel kurzorem na useLocation v kódu. A skutečně, vyskakovací okno ukázalo generický parametr, který se aplikoval na vlastnost state. Výsledek!

Odpověď č. 2

Nefungovalo to pro router V6

tohle je prohlášení

export declare function useLocation(): Location;

Toto nevyžaduje žádný typ argumentu

Podle problému na GitHubu někdo navrhl

interface CustomizedState {
  myState: string
}

const location = useLocation();
const state = location.state as CustomizedState; // Type Casting, then you can get the params passed via router
const { myState } = state;