Is there a way to use an if statement before showing the show page?

Question

Is there a way to do an if statement before showing the show page? For instance if the id of the element I clicked on with the show button end with ".log" I want to have the show page look like this:

export const reportShow = ({ ...props }) => (
<Show title="Log" {...props}>
    <SimpleShowLayout>
        <ReferenceManyField label="Log" reference="archivedfiles" target="id">
            <Datagrid>
                <TextField source="id" label="Line" />
                <TextField source="timestamp" label="Timestamp" />
                <TextField source="severity" label="Severity" />
                <TextField source="message" label="Message" />
            </Datagrid>
        </ReferenceManyField>
    </SimpleShowLayout>
</Show>);

But if the id ends with .txt I want the show page to show a Report page which would have this:

export const reportShow = ({ ...props }) => (
<Show title="Report" {...props}>
    <SimpleShowLayout>
                <TextField source="id" label="Report Name" />
                <TextField source="rmessage" label="Message" />
    </SimpleShowLayout>
</Show>);

What would be the best way to go about this?

Answer 1

I ended up getting this to work by doing this:

export const archivedShow = ({ ...props }) => {
    if (props.match.params.id.endsWith("txt")){
    return (<Show title="Report" {...props}>
        <SimpleShowLayout>
            <ReferenceManyField label="Report" reference="archivedfiles" target="id">
                <Datagrid>
                    <FormattedReportView/>
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
    </Show>
    );
    }
    else {
        return (
        <Show title="Log" {...props} filters={< LogFilter/>}>
            <SimpleShowLayout>
            <ReferenceManyField label="Log" reference="archivedfiles" target="id">
                <Datagrid>
                    <TextField source="id" label="Line" />
                    <TextField source="timestamp" label="Timestamp" />
                    <TextField source="severity" label="Severity" />
                    <TextField source="message" label="Message" />
                </Datagrid>
            </ReferenceManyField>
        </SimpleShowLayout>
        </Show>
        );
    }
}