React - expressions must have one parent element?

Put them in an array (assign the keys also):

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

With latest React version, you can try React.Fragment also, like this:

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

You can leverage short hand fragments to return a list of children along with Logical '&&' Operator for conditional rendering. Nice and clean!

{this.props.mail && 
  <>
    <Route path="inbox" component={Inbox} />,
    <Route path="contacts" component={Contacts} />
  </>
}

You must been use a fragment tag e.g(div, <>,...).

Check this short solution:

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