鍍金池/ 問答/HTML5  HTML/ react路由

react路由

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

謝謝

回答
編輯回答
未命名

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')
        })
    }
]
2018年6月20日 06:43