I am building a react navigation and have to pass info to the sidenav. Therefore I have to pass props to my body, but the body is rendered by a router and I can't just pass them. I have seen a lot on this, but always with self-closing tags, so that you can just paste the props in the render function of the Route. Below the code:

App.js

function App() {
//...
return (
<Router>

  <Switch>
    {Object.keys(routesGroupedByLayouts).map(layoutName => {
      const LayoutTag = layouts[layoutName];
      const layoutRoutes = routesGroupedByLayouts[layoutName].map(route => route.path);

      return <Route key={`layout-${layoutName}`} exact={true} path={layoutRoutes} render={() => {
        return (
          <ScrollToTop>
            <LayoutTag>
              <h1>sdsdddscxcxs</h1>
              <Switch>
                {routesGroupedByLayouts[layoutName].map(route => (
                  <Route key={route.path}
                         path={route.path}
                         exact={route.exact === true}
                         render={() => <route.component fallback={<Loading />} />} />
                ))}
              </Switch>
            </LayoutTag>
          </ScrollToTop>
        )
      }} />
    })}
  </Switch>
</Router>
);
}

default.jsx

const Default = ({children}) => {
//...
return (
    <Layout>
      <Layout.Body id={"main-content"}>
        <div>
          {children}
        </div>
      </Layout.Body>
    </Layout>
  )
}

I hope I pasted everything needed here. So the LayoutTag passes the children to the default.jsx, but I don't know how to pass the children to the rendered Body of the Route element. I have to pass the body a function that executes in default.

Hope somebody can help me out, thanks in advance!