<Route> 内部地图

Question

我没有找到问题的答案，所以我必须 post 在这里提问。为什么第二张地图中的 <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

您没有在 else 分支中返回任何内容。添加 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} />
    ));
  }
})

<Route> 内部地图

<Route> inside map

javascript

reactjs

react-router-dom