In my React js Typescript project, I have tried to create a nested route like this.
Dashboard.tsx
<Route path={`${path}/production-schedule`} >
<Route render={() =><ProductionSchedule />} />
</Route>
ProductionSchedule.tsx
<Route path={"/:date"} render={() =><ProductionScheduleSingleDateView />} />
<Paper
square
sx={{
p: 2,
display: 'flex',
flexDirection: 'column',
height: 106,
padding: '16px 0px 18px 24px',
}}
>
{/* Header section */}
<HeaderStepper title="Production Schedule" steps={ [{ link: '/', name: "Main Page"}, {link: '/dashboard/production-schedule', name: "Production Schedule"} ]} />
<Typography component="h2" variant="h6" style={{ marginTop: '22px' }}>
Production schedule
</Typography>
How can I make this route only match this if there is a path param, and not the entire route.