score:0

i use the same pattern as you in my case my routes variable looks like this:

export const routes = [
    {
        path: "/",
        exact: true,
        main: home
    },
    {
        path: "/company",
        exact: true,
        main: company
    },
    {
        path: "/comments",
        exact: true,
        main: comments
    }
]

edit: this is how i use it

routes.map(route => (
  <route
    key={route.url}
    path={route.url}
    exact
    component={route.component}
    // in case you want to add props to the component
    // render={props => <route.component path={route.url} {...props} />}
  />
))

score:1

main should not be a function in this case. try without a function or call the main function.

{routes.map(route => (
    <route
        key={route.path}
        path={route.path}
        exact={route.exact}
        component={route.main()}
     />
))}


Related Query

More Query from same tag