@Boris007

Почему React Router TS выдает ошибку loader при типизации параметров?

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:id",
        element: <Contact />,
        loader: contactLoader <---- здесь ошибка 
      },
    ],
  },
]);


Название ошибки
Type '({ params }: { params: TParams; }) => Promise<IContact>' is not assignable to type 'LoaderFunction'.
  Types of parameters '__0' and 'args' are incompatible.
    Type 'LoaderFunctionArgs' is not assignable to type '{ params: TParams; }'.
      Types of property 'params' are incompatible.
        Property 'id' is missing in type 'Params<string>' but required in type 'TParams'.


type TParams = {
    id: number
}

type IContact = {
    first: string,
    last: string,
    avatar: string,
    twitter: string,
    note: string,
    favorite: boolean,
}

export async function loader({params}: { params: TParams}): Promise<IContact> {
  const contact = await getContact(params.id))
  return contact
}


Но при записи loader({params}: any), ошибки нет

В чем я ошибся при типизации параметра и почему он ссылается на какой-то 'LoaderFunction'?
  • Вопрос задан
  • 277 просмотров
Пригласить эксперта
Ответы на вопрос 1
Вот тут есть примерное обсуждение Тыц..

Попробуй указать
children: [
      {
        path: "contacts/:id",
        element: <Contact />,
        loader: contactLoader as LoaderFunction
      },
    ],


И функцию loader я так понял тоже нужно типизировать с помощью LoaderFunction
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы