Question

我有一些Route组件用于动态生成路由，这些组件基于使用react-router 4在CMS中设置的页面（我通过API访问）。我有这些页面缓存然后设置为初始状态以便于访问。

我正在尝试遍历页面集，并根据为该页面设置的模板将页面与组件匹配。

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

我收到错误：

不变违规：Routes.render()：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

我怀疑因为循环需要时间才能运行，routes变量被设置为一个空数组所以抛出那个错误？

Answer 1

我怀疑因为循环需要时间才能运行，routes变量被设置为一个空数组所以抛出那个错误？

这不正确，循环是同步的。 routes不会为空。

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

无效的JSX，内联JSX表达式必须有一个父元素，而且解释器实际上将其解释为({ routes })，其中是{{1}的无效对象因此错误消息

您的内联JSX是一个方法参考：render，您需要为返回值执行它：this.getRoutes

相反，这样做：

this.getRoutes()

因此内联表达式有一个父级，或者你可以完全摆脱父级以获得简洁：

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

这将返回相应的render() { return this.getRoutes(); }组件。

为什么我的Route组件没有渲染？

1 个答案: