Tengo problemas para pasar accesorios entre componentes con react-rouer v6
Aquí están las rutas en App.tsx, quiero pasar accesorios del componente (Inicio) que redirigen a este (EditUser)
<Routes> <Route path={ROUTES.HOME} element={<Home />} /> <Route path={ROUTES.EDIT_USER} element={<EditUser props />} /> </Routes>La página de inicio tiene alguna funcionalidad para representar una tabla con los usuarios.
Aquí está la función para navegar a la página EditUser para poder editar
Quiero poder pasar uno de los usuarios una vez que se haga clic en el botón "editar" (agregué el estado ya que leí que esa era la forma de acceder desde la página Editar usuario)
const handleEdit = (user: IUser) => { navigate(ROUTES.EDIT_USER, { state: { user, }, }); };El botón de edición (la redirección está funcionando, es solo el hecho de pasar a ese usuario de los componentes)
<EditButton data-testid={`edit-button-${user.id}`} text={ES.common.edit} onClick={() => { handleEdit(user); }} ></EditButton>¿Alguna idea?
Como siempre, ¡gracias!
Cuando envía el estado en la transición de la ruta, no se envía a través de accesorios, sino que se envía a través del contexto de enrutamiento. En el componente EditUser , puede acceder al estado de la ruta enviada a través del objeto de location devuelto por el useLocation .
Ejemplo:
import { useLocation } from 'react-router-dom'; ... const location = useLocation(); const { state } = location; const { user } = state || {};