Tengo un modal que dependía de una url.
<Route path={`/preview/${params.id}`} children={({match}) => { return ( <ModalWindow modalVisible={Boolean(match)} onCloseWindow={onCloseWindow} modalContent={modal} /> ) }} /> Recibo un error A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes> .
Pero ya envolví toda mi aplicación en una etiqueta.
export default function AppRouter() { return ( <Routes> <Route path={"/home"} element={<HomeApp />} /> <Route path={"/preview/:id"} exact element={<HomeApp />} /> <Route path={"/fullInfo/:id"} exact element={<HomeApp />} /> <Route path={"*"} render={<Navigate to="/home"/>} /> </Routes> ) } PD: soy nuevo en react-router-dom de la nueva versión.
Tienes que envolver el elemento renderizado en el accesorio de element de tu Ruta. Así que en lugar de:
<Route path={"*"} render={<Navigate to="/home"/>} />Hacer esto:
<Route path={"*"} element={<Navigate to="/home"/>} /> Es lo mismo para la Ruta modal, debe envolver el componente en el element prop de la Ruta