0
292
Vistas¿Cómo abrir la vista detallada en la fila de la tabla seleccionada en react.js?
Tengo una tabla con varias filas y cuando selecciono una fila, quiero mostrar información detallada sobre el elemento seleccionado.
Hago uso de react-router-dom v6 y el componente de tabla de materiales de MUI. Debajo de un prototipo: 
Hago uso de rutas para cambiar el contenido al hacer clic en el elemento del menú. Lo siguiente es abrir una vista detallada, pero no estoy seguro de qué patrón usar. Estaba pensando en usar rutas, como una ruta anidada, pero no sé cómo pasar el objeto seleccionado a la vista de detalle que muestra el objeto con más detalles. Por supuesto, hay varias formas de hacerlo, pero no sé cuál es la mejor práctica.
Entonces, ¿cuál es la mejor práctica para lograr esto y cómo?
ACTUALIZAR
Puedo resolver mi problema como el fragmento a continuación. Funciona, pero no me gusta mucho esta solución.
const App = () => { const [activeRow, setActiveRow] = useState({}); return ( <StrictMode> <Table setActiveRow={setActiveRow} /> <Userdetails activeRow={activeRow} /> </StrictMode> ); };1 Respuestas
Responde la pregunta0
La mejor manera de hacer esto es usar useParams() con una ruta dinámica
primero, cree una ruta de ruta dinámica
Código de ejemplo
<Route path="invoices" element={<Invoices />}> <Route path=":invoiceId" element={<Invoice />} /> </Route>tenga en cuenta:
- Acabamos de crear una ruta que coincide con direcciones URL como "/facturas/2005" y
"/facturas/1998". La parte :invoiceId de la ruta es un "parámetro de URL",
lo que significa que puede coincidir con cualquier valor siempre que el patrón sea el mismo
ahora puede facturar ID en su <Invoice> como ejemplo
let params = useParams(); return <h2>Invoice: {params.invoiceId}</h2>;para obtener más detalles, puede seguir la guía React Router V6