<Route>内图

Question

我没有找到我的问题的答案，所以我必须在这里张贴一个问题。为什么第二个映射中的<Route>组件不能工作？它获取数据，但不构建<Route>组件。来自第一张地图的<Route>可以工作。也许这是个简单的解决办法，但我找不到。

const {genres} = this.state;
return(
<React.Fragment>
<Switch>
    {!_.isUndefined(genres) &&
        genres.map(g => {
            if(_.isEmpty(g.subgenres)) return <Route path={g.link} component={Page} key={g._id}/>;
            else g.subgenres.map(sub => <Route path={sub.link} component={Page} key={sub._id}/>);
        })
    }
</Switch>
</React.Fragment>
);

数据结构示例：

genres = [
    {
        "_id":"823710",
        "name":"Rock",
        "subgenres":[
            {
                "_id":"29033",
                "name":"Heavy Metal",
                "link":"/heavy-metal"
            },
            {
                ... other data ...
            }
        ],
        "link":""
    },
    {
        ... other data ...
    }
]

谢谢!

Answer 1

你不能在其他分支里归还任何东西。添加return关键字，它应该会像预期的那样工作。

genres.map(g => {
  if (_.isEmpty(g.subgenres)) {
    return <Route path={g.link} component={Page} key={g._id} />;
  } else {
    return g.subgenres.map(sub => (
      <Route path={sub.link} component={Page} key={sub._id} />
    ));
  }
})