Xtykutl

I have a route config like this:
/${URL.PRODUCT}/:category/:brand/:flavour/, with exact={true} and it loads the Product component.

On Product component I have this:

    constructor(props) {

    super(props)

    this.state = {

        selectedCategory: props.match.params.category || '',

        selectedFlavour: props.match.params.flavour || '',

        selectedBrand: props.match.params.brand || '',

    }

    s("PARAMS", JSON.stringify(props.match.params)); //console on server

    c("PARAMS", JSON.stringify(props.match.params)); // console on browser

}

Now, on some other component I have a click event, which does this:

clickHandler = (cardData) => {

        let path = `/${URL.PRODUCT}/${cardData.selectedCategory}/${cardData.selectedCard}/${cardData.slug}`;

        cardData.type === CONTENT_TYPE.FLAVOUR && !!cardData.slug && this.props.history.push(path);

    }

And cardData looks like this:

{

    id: 3

    image: "/some/imagepath/"

    name: "Diet Coke"

    selectedCard: "cocacola"

    selectedCategory: "softdrinnk"

    slug: "dietcoke"

    type: "flavour"

}

Its resulting in something like this: /product/softdrinnk/cocacola/dietcoke

Now the problem: As I am hitting this.props.history.push() its making a server call (which it should not) also, with a wrong URL: /product/softdrinnk/cocacola/undefined

This is what my console looks like on client:

PARAMS {"category":"softdrinnk","brand":"cocacola","flavour":"dietcoke"}

And this is what I receive on server:

PARAMS {"category":"softdrinnk","brand":"cocacola","flavour":"undefined"}

I have spend the whole day figuring out why this behaviour is happening.

Update:

Even if when I hardcoded the URL: /${URL.PRODUCT}/${cardData.selectedCategory}/${cardData.selectedCard}/dietcoke, Its ignoring the last parameter and still and passing undefined to the server

And when I hit browser refresh on this route, it works normally and loads all the data