Estoy creando una navegación de reacción y tengo que pasar información a sidenav. Por lo tanto, tengo que pasar accesorios a mi cuerpo, pero el cuerpo está renderizado por un enrutador y no puedo simplemente pasarlos. He visto mucho sobre esto, pero siempre con etiquetas de cierre automático, para que puedas pegar los accesorios en la función de renderizado de la Ruta. Debajo del código:

Aplicación.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> ); }

predeterminado.jsx

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

Espero haber pegado todo lo necesario aquí. Entonces, LayoutTag pasa los elementos secundarios a default.jsx, pero no sé cómo pasar los elementos secundarios al cuerpo representado del elemento de ruta. Tengo que pasarle al cuerpo una función que se ejecuta por defecto.

Espero que alguien me pueda ayudar, gracias de antemano!