Estoy tratando de usar el enrutador de reacción con la identificación de accesorios, pero me dio esta información:
Matched leaf route at location "/some-12" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
Estoy usando "react-router-dom": "6" y "react": "^17.0.2"
//example Routes import {Route, Routes } from "react-router-dom"; function App() return( <> <Routes> <Route path="/about" element={<About />}/> <Route exec={true} path="/something" element={<Something/>}/> <Route exact={true} path="/something-:id" render={(props) => { <Some id={props.match.params.id} />;}} /> <Route path="/contact" element={<Contact />}/> </Routes> </>``` //example Some export default function Some({ id }) { return( <> <p>Some with id: {id} </> )}¿Dónde cometí errores?
En la versión 6 react-router-dom , los componentes de Route representan todos los componentes enrutados en el accesorio de element y ya no hay accesorios de ruta, es decir, no hay history , location o match .
Renderice el componente Some en el element prop y use el useParams para acceder al parámetro de coincidencia de ruta de id . Si path="/something-:id" no funciona, intente convertir el id en su propio segmento de ruta, es decir, path="/something/:id" .
function App() return( <> <Routes> <Route path="/about" element={<About />}/> <Route path="/something" element={<Something/>}/> <Route path="/something-:id" element={<Some />} /> <Route path="/contact" element={<Contact />}/> </Routes> </> ); }...
import { useParams } from 'react-router-dom'; export default function Some() { const { id } = useParams(); return( <> <p>Some with id: {id} </> ); }Puede ser que te hayas perdido una declaración de devolución en tu elemento prop.
<Route exact={true} path="/something-:id" render={(props) => { return <Some id={props.match.params.id} />;}} /> // or <Route exact={true} path="/something-:id" render={(props) => <Some id={props.match.params.id} />;}/> Nota: Después de más investigaciones, el apoyo de representación se eliminó en v6. Debería usar el elemento en su lugar y obtener el :id según la respuesta de Drew Reese