I have below code in my App.js
<BrowserRouter>
{/* <CaseDetailsController /> */} //Rendering directly
<Switch>
<Route path='/check'>
<CaseDetailsController />}
</Route>
</Switch>
</BrowserRouter>
I have <CaseDetailsController /> component which I want to render when my URL is - '/check'.
And <CaseDetailsController> has a child <CaseDetails> which has a section that renders components based on value from below logic.
<Switch>
{
Routes.map((x, y) => {
console.log(x.redirectUrl, x.component)
return (
<Route key={y} path={x.redirectUrl} component={x.component} />
)
})
}
</Switch>
My internal child routing works fine when I am writing CaseDetailsController directly. But when I put it inside <Route> the navigation works from CaseDetailsController but routing stops working for its child i.e. <CaseDetails>.
What is the problem here?
