React routing

.
< Index location= {location} >
{

        routes.map(r => {
          console.log(r)
            return(
              <Route
                key={r.path}
                exact
                path={r.path}
                component={r.component}
              />
            )
          }

}
< Index >
error Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

where routes= [
{path:"/ app/ui/buttons", component: () = > import (".. / components/buttons")},
{path:"/ app/ui/icons", component: () = > import (".. / components/icons")}
.
]

Thank you

May.10,2021

react does not support asynchronous components. It is recommended to use react-loadable this component.

import Loadable from 'react-loadable';

routes=[
    {
        path: '/app/ui/buttons',
        component: Loadable({
            loader: () => import('../components/buttons')
        })
    },
    {
        path: '/app/ui/icons',
        component: Loadable({
            loader: () => import('../components/icons')
        })
    }
]
Menu