Typescript Typings for HoC in React Router Config

Viewed 1466

Using React Router Config (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config), I have the following routes config file:

export const routes: RouteConfig[] = [
  {
    component: injectRoutes(HomeLayout),
    path: "/home/(componentx|componenty)",
    routes: [
      {
        component: ComponentX,
        exact: true,
        path: "/home/componentx",
      },
      {
        component: ComponentY,
        exact: true,
        path: "/home/componenty",
      },
    ],
  },
];

My injectRoutes function is a little HOC to construct the child routes, it looks like this:

import React from "react";
import { renderRoutes, RouteConfigComponentProps } from "react-router-config";

export const injectRoutes = (WrappedComponent: React.ComponentType<any>) => ({
  route: { routes },
  ...props
}: RouteConfigComponentProps) => (
  <WrappedComponent {...props}>{renderRoutes(routes)}</WrappedComponent>
);

Given, the code above, I get a Property 'routes' does not exist on type 'RouteConfig | undefined'.ts(2339) error from typescript.

For reference, these are the typings for react-router-confiq

import * as React from "react";
import { RouteComponentProps, SwitchProps, match } from "react-router";
import { Location } from "history";

export interface RouteConfigComponentProps<Params extends { [K in keyof Params]?: string } = {}> extends RouteComponentProps<Params> {
    route?: RouteConfig;
}

export interface RouteConfig {
    key?: React.Key;
    location?: Location;
    component?: React.ComponentType<RouteConfigComponentProps<any>> | React.ComponentType;
    path?: string | string[];
    exact?: boolean;
    strict?: boolean;
    routes?: RouteConfig[];
    render?: (props: RouteConfigComponentProps<any>) => React.ReactNode;
    [propName: string]: any;
}

export interface MatchedRoute<Params extends { [K in keyof Params]?: string }> {
    route: RouteConfig;
    match: match<Params>;
}

export function matchRoutes<Params extends { [K in keyof Params]?: string }>(routes: RouteConfig[], pathname: string): Array<MatchedRoute<Params>>;

export function renderRoutes(
    routes: RouteConfig[] | undefined,
    extraProps?: any,
    switchProps?: SwitchProps,
): JSX.Element;

I am a little new to Typescript in React so I'm not quite sure how to solve this because as far as I can tell, routes is defined on RouteConfig. Is the error because route might be undefined?

0 Answers
Related