<Route exact path="/product/:id" element={<ProductPage />} prod_id={this.id}/> Aquí tengo una ruta en la que mi intención es obtener la identificación de la ruta en mi componente para poder activar la función y obtener los detalles del producto, obviamente, prod_id={this.id} no funciona para mí y también se supone que no trabajar escribiendo esto es solo para mostrar lo que estoy pensando
una vez que obtenga esta identificación en mi componente, puedo activar esta función
export const getSingle=(id) => async(dispatch)=>{ try { dispatch({type:SINGLE_PRODUCT_REQUEST}) const {data} = await axios.get(`/api/v1/products/detail:${id}`) dispatch({ type:SINGLE_PRODUCT_SUCCESS, payload:data, }) } catch (error) { dispatch({ type:SINGLE_PRODUCT_FAIL, payload:error.response.data.message, }) } }para obtener el detalle del producto y llenar el campo requerido
puede obtener la id del gancho useParams() .
Código de ruta
<Route exact path="/product/:id" element={<ProductPage />} /> en el componente de reacción, importe el gancho useParams de react-router-dom y obtenga la identificación usando
let { id } = useParams();No puede pasar accesorios a la ruta y acceder a ellos en el componente de destino. Así no es como funcionan las cosas en React.
Si desea acceder a los parámetros desde la URL, puede usar ganchos - useParams()
export const getSingle= () => async(dispatch)=>{ try { dispatch({type:SINGLE_PRODUCT_REQUEST}) const params: { id: string } = useParams(); const {data} = await axios.get(`/api/v1/products/detail:${params.id}`) dispatch({ type:SINGLE_PRODUCT_SUCCESS, payload:data, }) } catch (error) { dispatch({ type:SINGLE_PRODUCT_FAIL, payload:error.response.data.message, }) } }Para un componente no funcional, debe acceder a los parámetros desde los accesorios.
class Example extends Component { render() { const { id } = this.props.match.params; return ( <div>ID : { id }</div> ); } }