Mi fragmento de componente Home actual es:
function Home() { return ( <div> <AddTaskForm ailDivision={ailDivision} ascDivision={ascDivision} apcDivision={apcDivision} /> <UpdateTaskForm ailDivision={ailDivision} ascDivision={ascDivision} apcDivision={apcDivision} /> <EtaFetch /> </div> ); } export default Home; Pero quiero que estos componentes tengan rutas individuales, usando react-router-dom como:
function Home() { return ( <div> <Routes> <Route path="/addtask" exact element={<AddTaskForm/>} /> <Route path="/updatetask" exact element={<UpdateTaskForm/>} /> <Route path="/etafetch" exact element={<EtaFetch/>} /> </Routes> </div> ); }Mi pregunta es: ¿Cómo paso accesorios a los componentes de ruta en el segundo fragmento?
Los componentes enrutados se representan como JSX, por lo que pasar accesorios funciona normalmente en React.
Ejemplo:
function Home() { return ( <div> <Routes> <Route path="/addtask" element={( <AddTaskForm ailDivision={ailDivision} ascDivision={ascDivision} apcDivision={apcDivision} /> )} /> <Route path="/updatetask" element={( <UpdateTaskForm ailDivision={ailDivision} ascDivision={ascDivision} apcDivision={apcDivision} /> )} /> <Route path="/etafetch" element={<EtaFetch />} /> </Routes> </div> ); }