<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

Вы ничего не возвращаете в ветке 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} />
    ));
  }
})