const routes = [ { path: '/home', exact: true, name: 'Home', component: <Home />, private: true }, { path: '/dashboard', exact: true, name: 'Dashboard', component: <Dashboard />, private: true }, ]; const Content = () => { return ( <div className="c-app c-default-layout" style={{background: "#E5E5E5"}}> <div className="c-wrapper"> <Header name={"Riya"}/> <div className="c-body"> <React.Suspense fallback={<div />}> <Switch> <Route path="/dashboard" children={<Dashboard />} /> {routesFile.map((route, idx) => { return route.component && ( <Route key={idx} path={route.path} name={route.name} children={(props) => ( <route.component {...props} /> )} /> ) })} </Switch> </React.Suspense> </div> <Footer /> </div> </div> ) } export default Content;

Aquí recibo el error mientras trato de dar rutas dinámicas para reaccionar al componente usando react-router-dom. ¿Qué debo poner para que pueda funcionar sin un error? por favor ayúdame con el código.