React Router is not rendering - reactjs

Question

I am trying to understand nested react router structure. I have implemented some code from a tutorial but it is not working as expected. Here is my routes.js file.
import React from "react";
import {
BrowserRouter as Router,
Switch
} from "react-router-dom";
const ROUTES = [
{ path: "/", key: "ROOT", exact: true, component: () => <h1>Log in</h1> },
{
path: "/app",
key: "APP",
component: RenderRoutes,
routes: [
{
path: "/app",
key: "APP_ROOT",
exact: true,
component: () => <h1>App Index</h1>,
},
{
path: "/app/page",
key: "APP_PAGE",
exact: true,
component: () => <h1>App Page</h1>,
},
],
},
];
export default ROUTES;
function RouteWithSubRoutes(route) {
return (
<Router
path={route.path}
exact={route.exact}
render={props => <route.component {...props} routes={route.routes} />}
/>
);
}
export function RenderRoutes(routes ) {
return (
<Switch>
{routes.map((route, i) => {
return <RouteWithSubRoutes key={route.key} {...route} />;
})}
<Router component={() => <h1>Not Found!</h1>} />
</Switch>
);
}
I have imported
BrowserRouter
in index.js as usual. In my App component I tried to render RenderRoutes(ROUTES):
function App() {
return (
<div style={{ display: "flex", height: "100vh", alignItems: "stretch" }}>
<div style={{ flex: 0.3, backgroundColor: "#f2f2f2" }}>route menu</div>
<div>
{/* <RenderRoutes routes={ROUTES} /> This way also is not working*/}
{RenderRoutes(ROUTES)}
</div>
</div>
);
}
Here I am trying to render subcomponents but the page is not showing anything except (root menu) text from app.js. Let me know what am I doing wrong. Thanks in advance

Answer 1

The react router structure usually follows 1 Switch 1 Router and multiple Routes
<Router>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/YOUR_PATH">
<BlogPost />
</Route>
</Switch>
</Router>,
You are returning multiple Router in RouteWithSubRoutes change that to Route
function RouteWithSubRoutes(route) {
return (
<Route
path={route.path}
exact={route.exact}
render={props => <route.component {...props} routes={route.routes} />}
/>
);
}