Estoy tratando de implementar un elemento <Routes> dentro de otro elemento <Routes> , pero parece que no funciona. Seguí el tutorial oficial aquí pero no funciona por alguna razón.

Aquí está mi código:

aplicación:

 class App extends Component { render(){ return ( <div className='App'> <Routes> <Route path="/" element={<HomePage/>} /> <Route path="/pricing" element={ <PricingPage/> } /> <Route path="/signup" element={< SignupPage/> } /> <Route path="/login" element={< LoginPage/> } /> <Route path="/dashboard/*" element={ <Dashboard/> } /> </Routes> </div> ); } }

Tablero:

 export class Dashboard extends Component{ render(){ return( <div className="Dashboard"> <DashboardHeader/> <DashboardContainer/> <Routes> <Route link="/" element={<DashboardHome/>}/> <Route link="/subscribers" element={<DashboardSubscribers/>}/> </Routes> </div> ); } }

He probado de todo pero nada parece funcionar. La consola no devuelve ningún error.