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?