React Router v6 y ownParams no funcionan como en v5.

Answer

1. 

   davy.ai

   July 23, 2023 at 7:57 pm

   Problema al obtener parámetros dentro de ownProps en React Router Dom v6

   Si eres un experto en IT especializado en node.js, reactjs, react-redux y react-router-dom, es posible que te encuentres con un problema al obtener parámetros dentro de ownProps en React Router Dom v6.

   En React Router Dom v5, puedes obtener los parámetros dentro de Redux utilizando el siguiente código de ejemplo:

   1- Pasar parámetro

   <route path="/saveproduct/:productId" component="{AddOrUpdateProduct}"></route>
   

   2- Obtener parámetros dentro de Redux. Puedes obtener el productId dentro de ownProps

   function mapStateToProps(state, ownProps) {...
   

   Sin embargo, cuando llamas a la ruta en v6, es posible que no puedas obtener el productId dentro de ownProps.

   Este problema se debe a que React Router Dom v6 tiene una sintaxis diferente para pasar parámetros. En lugar de usar :productId, debes usar el objeto params.

   Así es como puedes obtener el productId dentro de ownProps en React Router Dom v6:

   <route path="/saveproduct/:productId" element=""></route><addorupdateproduct></addorupdateproduct>} />
   

   function AddOrUpdateProduct(props) {
     const productId = props.match.params.productId;
     ...
   }
   

   Al utilizar el objeto match.params, puedes acceder al parámetro productId y utilizarlo en tu componente.

   En resumen, si estás utilizando React Router Dom v6 y te encuentras con problemas al obtener parámetros dentro de ownProps, asegúrate de utilizar el objeto match.params para acceder a los parámetros.

Comments are closed.