react路由

Question

...
<Index location={location}>
{

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

}
<Index>
报错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.

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

谢谢

Answer 1

react 不支持异步组件, 建议使用 react-loadable 这个组件.

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')
        })
    }
]