After setting up material-ui tabs with react-router, I encountered an issue where only the tab names Tab A and Tab B are displayed upon page render. The desired behavior is for the TabAReport component to be automatically rendered without requiring user interaction.
Despite configuring the necessary values for the first tab to display automatically, it doesn't seem to be functioning as expected.
If anyone could offer assistance or guidance on resolving this issue, it would be greatly appreciated.
const routes = ["/tab-a-report", "/tab-b-report"];
<Tabs
value={0}
onChange={handleChange}
textColor="default"
variant="standard"
>
<Tab
value={0}
label="Tab A"
component={Link}
to={`${routes[0]}/${id}`}
/>
<Tab
value={1}
label="Tab B"
component={Link}
to={`${routes[1]}/${id}`}
/>
</Tabs>
<Switch>
<Route exact path="/tab-a-report/:id" component={TabAReport} />
<Route exact path="/tab-b-report/:id" component={TabBReport} />
</Switch>