🫠
【TanStack Router】useNavigate()のエラー解消方法
背景
@tanstack/react-routerのverを "^1.53.0" → "^1.82.0"へと移行した際に下記のコードにlintエラーが生じた
// 修正前：検索リクエストを送る関数
const handleSubmit = useCallback(
(data: InferOutput<typeof formSchema>) => {
return navigate({
search: (prev) => ({ ...prev, ...data }), // lintエラー発生
});
},
[navigate],
);
結論
バージョンアップしたことで、toのプロパティが必要になったのと型注釈が必要になった。
// 修正後：検索リクエストを送る関数
const handleSubmit = useCallback(
(data: InferOutput<typeof formSchema>) => {
return navigate({
to: `.`,
search: (prev: DatabaseSearchParamsType) => ({ ...prev, ...data }),
});
},
[navigate],
);
また、useNavigate()定義時の引数にfromを追加することでも解決する。
要するにパスを明記的に書けってことですかね。。
const navigate = useNavigate({from: '/my/path'});
Discussion