TabbedShowLayout component resolves path incorreclly if first tab is null

[WiXSL]

Trying to set an optional Tab component as the first Tab inside a TabbedShowLayout component.
Note: I solve it by setting a custom path to every Tab and making my own ShowButton.

Test to reproduce the problem in ra-ui-materialui package:

The test fails and you get a console error.
console.error ../../node_modules/@material-ui/core/Tabs/Tabs.js:221 Material-UI: The value provided to the Tabs component is invalid. None of the Tabs' children match with /. You can provide one of the following values: //1, //2.

If you remove the {null} line, the test pass without errors.

import * as React from 'react';
import expect from 'expect';
import { cleanup, render } from '@testing-library/react';

import TabbedShowLayout from './TabbedShowLayout';
import Tab from './Tab';
import TextField from '../field/TextField';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router-dom';

describe('<TabbedShowLayout />', () => {
    afterEach(cleanup);

    const renderWithRouter = children => {
        const history = createMemoryHistory();

        return {
            history,
            ...render(<Router history={history}>{children}</Router>),
        };
    };

    it('should display the first valid Tab component and its content', () => {
        const { queryByText, history } = renderWithRouter(
            <TabbedShowLayout basePath="/" record={{ id: 123 }} resource="foo">
                {null}
                <Tab label="Tab1">
                    <TextField label="Field On Tab1" source="field1" />
                </Tab>
                <Tab label="Tab2">
                    <TextField label="Field On Tab2" source="field2" />
                </Tab>
            </TabbedShowLayout>
        );

        expect(queryByText('Tab1')).not.toBeNull();
        expect(queryByText('Field On Tab1')).not.toBeNull();
    });
});

[djhi]

Have you tried this with raw material-ui Tabs? I think it will behave the same way

[WiXSL]

Seems to work.
Even trying setting <Tabs value={2}> (which doesn't exist) make the test pass.

import * as React from 'react';
import expect from 'expect';
import {render, cleanup} from '@testing-library/react';

import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

describe('<MuiTab />', () => {
    afterEach(cleanup);

   it('should display the first valid Tab component', () => {
        const {queryAllByText} = render(
            <Tabs value={0}>
                {null}
                <Tab label="Tab1" />
                <Tab label="Tab2" />
            </Tabs>
        );

        expect(queryAllByText('Tab1')).toHaveLength(1);
    });
});

[fzaninotto]

Fixed by #5312