Реагировать - выражения должны иметь один родительский элемент?

Я относительно новичок в реагировании, и мне интересно, какой здесь стандарт.

представьте, что у меня есть react-router, как этот:

<Router history={history}>
    <Route path="/" component={App}>
      <Route path="home component={Home} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
      <Route path="contacts" component={Contacts} />
    </Route>
</Router>

и теперь я хочу удалить два маршрута, если prop.mail установлено значение false, Так что разумный способ сделать это будет выглядеть так:

<Router history={history}>
      <Route path="/" component={App}>
        <Route path="home component={Home} />
        <Route path="about" component={About} />

        { if.this.props.mail ? 
          <Route path="inbox" component={Inbox} />
          <Route path="contacts" component={Contacts} />
        : null }

      </Route>
 </Router>

но есть 2 маршрута, и React возвращает ошибку:

выражения должны иметь один родительский элемент.

Я не хочу использовать несколько ifs здесь. Каков предпочтительный способ справиться с этим?

10
react-router reactjs

1 ответов

поместите их в массив (также назначьте ключи):

{ if.this.props.mail ? 
    [
        <Route key={0} path="inbox" component={Inbox} />,
        <Route key={1} path="contacts" component={Contacts} />
    ]
: null }

С последней версией React вы можете попробовать React.Fragment кроме того, вот так:

{ if.this.props.mail ? 
    <React.Fragment>
        <Route path="inbox" component={Inbox} />,
        <Route path="contacts" component={Contacts} />
    </React.Fragment>
: null }
11