式には1つの親要素が必要です」というエラーが発生するのですが、どのように修正すればよいですか？

質問

Reactは比較的初心者なのですが、ここでの標準はどうなっているのでしょうか？

このような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>

そして、今度は2つのルートを削除したいのですが、もし 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はエラーを返します。

式は1つの親要素を持つ必要があります。

私はここで複数のifを使用したくありません。これを扱うのに望ましいReactの方法は何ですか？

どのように解決するのですか？

配列に入れる（キーも代入する）。

{ 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 }