Tengo un grid que muestra "N" productos y al hacer click en uno de ellos la idea es recibir una url del tipo http://localhost:3000/product/13-producto-de-pruebas

Donde "13" será el ID del producto y "producto de pruebas" formará parte de la URL.

La idea es este código de producto 13 recogerlo desde un componente en REACT y lanzar una consulta a la API de productos para devolver las propiedades del objeto y printarlas por pantalla.

Los problemas que me encuentro sin saber como resolver són :
a) donde actualmente tengo la constante termino = 13 , como recoger dicho valor de la URL? o debo pasarlo del componente anterior "grid" a este y recogerlo?
b) en el render del componente hago la llamada a la API, pues dicha API veo que se ejecuta infinita veces, solo quiero que lo haga una vez renderizado el componente.




    import React, {Component} from "react";

    class Product extends Component{

    state = {
        termino : '',
    }


    consultarApi = () => {
        const termino = 13;
        const url = `http://api-local.dev/api/products/${termino}`;
        console.log(url);

        fetch(url)
            .then(response => response.json())
            .then(result => this.setState({ productos : result } ));
    }

    datosBusqueda = (termino) => {
        this.setState({
            termino
        }, () => {
            this.consultarApi();
        })
    }


    render() {

        this.consultarApi();

        return (


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

                    Producto <br/><br/><br/><br/>

                </div>

        );
        }
    }

    export default Product;