为什么我的 Route 组件不呈现？

Question

我有一些 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}
    )
  }
}

我收到一个错误：

Invariant Violation: Routes.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

我怀疑是因为循环花费时间到运行，routes 变量被设置为空数组所以会抛出该错误？

Answer 1

I suspect because the loop is taking time to run, the routes variable is set to an empty array so is throwing that error?

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

问题是你 return 错了。您必须 return 一个 JSX 元素，但您的代码当前是：

无效的 JSX，内联 JSX 表达式 必须有一个父元素 ，而且解释器实际上将它解释为 ({ routes }) 而 是 render 的无效对象，因此错误消息
你的内联JSX是一个方法引用：this.getRoutes，你需要为return值执行它：this.getRoutes()

相反，这样做：

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

以便内联表达式有一个父级，或者为了简洁起见，您可以完全去掉父级：

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

这将 return 相应的 <Route> 组件。

为什么我的 Route 组件不呈现？

Why aren't my Route components rendering?

reactjs

react-jsx

react-router

react-router-v4