react router is only replacing the final route on history.push

Question

I am trying to redirect with react router to another page after a certain amount of time has passed.

The code I have so far is:

 submitActivity(){
        axios.post('/tiles', {
            activityDate:this.state.startDate,
            planId:this.state.planId,
            value:this.state.sliderValue
        })
            .then(res=>{
                console.log(res);
                this.modalHandleShow();
                setTimeout(function(){
                    this.goBackToTile();
                }.bind(this),3000);
            })
            .catch(err=>console.log(err));
    }

    goBackToTile(){
        this.props.history.push(`tile/${this.state.tileId}`)
    }

history is definitely being called, but the url which is currently

/addActivity/tile/2/plan/9

only gets changed to /addActivity/tile/2/plan/tile/2

while /tile/2 is correct I don't understand why the rest of the url stays in tact?

Answer 1

Make sure you include a / in the beginning of the string, or it will be used relative to your current url.

goBackToTile() {
    this.props.history.push(`/tile/${this.state.tileId}`)
}