Расширить интерфейс дополнительным определенным полем React Typescript

avatar
bp123
9 августа 2021 в 07:04
167
0
0

Я пытаюсь расширить React-Route V6 RouteObject, включив в него дополнительное поле. В приведенном ниже примере я хотел бы включить элемент name. Моя попытка ниже не работает. Может кто-нибудь показать мне, что я делаю неправильно. Я новичок в TypeScript.

Путь: React-Router V6 RouteObject interface

export interface RouteObject {
  caseSensitive: boolean;
  children?: RouteObject[];
  element: React.ReactNode;
  path: string;
}

Путь: My Component

export interface IRouteObject extends RouteObject {
  name: string;
  children?: IRouteObject[];
}

const routes: IRouteObject = [
  {
    path: '/forms',
    element: <FormPage /> 
    caseSensitive: true,
    name: 'forms',
    children: [
      { path: '/', element: <p>Name Form</p>  caseSensitive: true, name: 'Name form' },
    ]
  }
]

ОБНОВЛЕНИЕ

Сообщение об ошибке. Свойство "имя" не существует для типа "RouteObject[]". Ошибка возникает во фрагменте кода ниже, когда я console.log(childRoute.name).

Путь: Nav

const Nav: React.FC<{}> = () => {
  let location = useLocation();
  let routeMatches = matchRoutes(routes, location);

  if (routeMatches && routeMatches.length > 1) {
    const childRoutes = routeMatches[0].route.children;
    
    childRoutes?.map((childRoute, index) => {
      console.log(childRoute.name);
    }

  )}
}
Источник
Skocdopole
9 августа 2021 в 07:08
2

Пожалуйста, поделитесь ошибкой, которую вы получаете.

Peter Lehnhardt
9 августа 2021 в 07:24
1

Единственная ошибка, которую я вижу, это то, что вы использовали const routes: IRouteObject = [ вместо const routes: IRouteObject[] = [.

Bruno Grieder
9 августа 2021 в 07:24
1

routes должен быть массивом, нет? должно быть const routes: IRouteObject[] = ...

bp123
9 августа 2021 в 08:51
0

Пожалуйста, найдите обновленный код. Я добавил дополнительную информацию и сообщение об ошибке. Свойство «имя» не существует для типа «RouteObject[]».

Ответы (0)