Reactjs 为什么不'；我的管线组件渲染失败了吗？

我有一些

Route

组件，我使用这些组件根据CMS中设置的页面（我通过API访问），使用react router 4动态生成路由。我缓存了这些页面，然后将其设置为初始状态以便于访问

我试图循环遍历页面集，并根据为该页面设置的模板将该页面与组件相匹配

class Routes extends Component {

  getRoutes(){

    const routes = map(this.props.pages, (page, key) => {
      switch(page.template){
        case 'home':
          return <Route exact path={`${page.path}`} component={Home} key={key}/>
        case 'about':
          return <Route path={`${page.path}`} component={About} key={key}/>
        case 'campaign':
          return <Route path={`${page.path}`} component={Campaign} key={key}/>
        case 'product':
          return <Route path={`${page.path}`} component={Product} key={key}/>
        case 'article':
          return <Route path={`${page.path}`} component={Article} key={key}/>
        case 'contact':
          return <Route path={`${page.path}`} component={Contact} key={key}/>
        default:
          throw new Error(`No page container matching page's template - ${page.template}`)
      }
    })

    return (
      <Switch>
        {routes}
        <Route component={NoMatch}/>
      </Switch>
    )
  }

  render() {

    const routes = this.getRoutes;

    return (
      {routes}
    )
  }
}

类路由扩展组件{
getRoutes（）{
const routes=map（this.props.pages，（page，key）=>{
开关（page.template）{
“家”案例：
返回
案例“关于”：
返回
“运动”一案：
返回
案例“产品”：
返回
案例“文章”：
返回
“联系人”案例：
返回
违约：
抛出新错误（`No page container matching page's template-${page.template}`）
}
})
返回(
{routes}
)
}
render（）{
const routes=this.getRoutes；
返回(
{routes}
)
}
}

我得到一个错误：

不变冲突：

Routes.render（）

：必须返回有效的React元素（或null）。您可能返回了未定义、数组或其他无效对象

我怀疑，因为循环运行需要时间，

routes

变量被设置为空数组，所以是否抛出该错误

我怀疑，因为循环运行需要时间，

routes

变量被设置为空数组，所以是否抛出该错误

这是不对的，循环是同步的<代码>路线将不会为空

问题是你回来错了。您必须返回JSX元素，但您的代码当前为：

无效的JSX，内联JSX表达式必须有父元素，加上解释器实际将其解释为

（{routes}）

，这是

呈现的无效对象，因此会显示错误消息

您的内联JSX是一个方法引用：

this.getRoutes

，您需要为返回值执行它：

this.getRoutes（）

相反，请执行以下操作：

render() {
  <div>
    {this.getRoutes()} 
  </div>
}

---

这将返回相应的

组件。

锁定它！谢谢安德鲁

render() {
    return this.getRoutes();
}