1

Genero un link con un "navlink" en un componente que se llama "ProductCard" y quiero pasarle las props a un componente que se llama "Product"

Componente ProductCard

import React, {Component} from "react";
import {NavLink} from "react-router-dom";

class ProductCard extends Component{
 
    render() {

        return (
            <div className="col-xl-4 col-md-6 col-xs-12">
                Nombre: {this.props.producto.name}<br/>
                Precio: {this.props.producto.price}<br/>

                <NavLink
                    to={{
                        pathname:"/product/" +  `${this.props.producto.id}`,
                        aboutProps:{
                            product_id: `${this.props.producto.id}`,
                            product_name: `${this.props.producto.name}`,
                        }
                    }}
                    exact
                > Ver producto
                </NavLink>

            </div>
        );
    }
}

export default ProductCard;

Componente Product.js

import React, {Component} from "react";

class Product extends Component{

    constructor(props) {
        super(props);
        console.log(props.location.aboutProps);
        this.state = {
            termino: '1',
            producto: []
        }
    }
 

    render() {
 
        return (

                <div className="app container" style={{backgroundColor: "whitesmoke", padding: "10px"}}>

                    Producto1  <br/><br/><br/><br/>

                </div>

        );
    }
}

export default Product;

El error que recibo es este.

introducir la descripción de la imagen aquí

0

1 respuesta 1

1
+50

acabo de probar el código y debería funcionar, si haces la configuración adecuada.

Generé el siguiente codesandbox: funcionando https://codesandbox.io/s/rough-tree-9iooj

Toma en cuenta que debes tener todo lo siguiente:

  • Paso 1: Debes definir un Router y Switch, en donde están tus rutas. (Es importante el orden, más restrictivo a menos restrictivo)
    <div className="App">
      <Router>
        <Switch>
          <Route path="/product/:id" component={Product} />
          <Route path="/" component={ProductList} />
        </Switch>
      </Router>
    </div>
  • Paso 2: Una vez definiste esto, entonces debes crear tus componentes. Product.js
import React, { Component } from "react";
import { NavLink } from "react-router-dom";

class Product extends Component {
  constructor(props) {
    super(props);
    console.log(props);
  }

  render() {
    const productInfo = this.props.location.aboutProps;
    return (
      <div
        className="app container"
        style={{ backgroundColor: "whitesmoke", padding: "10px" }}
      >
        {productInfo.product_id} - {productInfo.product_name}
        <br />
        <br />
        <br />
        <NavLink to="/" exact>
          Volver
        </NavLink>
      </div>
    );
  }
}

export default Product;

Y ProcutCard.js:

import React, { Component } from "react";
import { NavLink } from "react-router-dom";

class ProductCard extends Component {
  render() {
    return (
      <div className="col-xl-4 col-md-6 col-xs-12">
        Nombre: {this.props.producto.name}
        <br />
        Precio: {this.props.producto.price}
        <br />
        <NavLink
          to={{
            pathname: `/product/${this.props.producto.id}`,
            aboutProps: {
              product_id: `${this.props.producto.id}`,
              product_name: `${this.props.producto.name}`
            }
          }}
          exact
        >
          {" "}
          Ver producto
        </NavLink>
      </div>
    );
  }
}

export default ProductCard;

Creo que lo único que te está faltando es el paso 1, pero toma en cuenta el NavLink del paso 2. Además, puedes usar de referencia el CodeSandbox. Espero te funcione

2
  • Muchas gracias, me ha servido al 100% tu ejemplo muchas gracias.
    – ilernet
    Commented el 2 nov. 2021 a las 11:39
  • Ningún problemo :thumbs_up:
    – joseglego
    Commented el 2 nov. 2021 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.