مشکل با this.props.history.push در react

سلام وقت بخیر
یه component دارم که لینکش به این صورت کار میکنه "http://localhost:۳۰۰۰/category/۱" داخل همین component هم از دستور this.props.history.push('/movie/' + category.id.toString()) برای لینک کردن به component دیگه استفاده کردم اما موضوع اینه که اگر برای اولین بار این آدرس "http://localhost:۳۰۰۰/category/۱" باز بشه این دستور لینک داخلش هم کار میکنه اما وقتی که route من از "category/۱" میره به category/۲ این دستور this.props.history.push دیگه کار نمی کنه و همین category/۲ نشون میده. ممنون میشم یه راهنمایی به من بدید
اینم کد

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { fakeData } from '../../shared/models/fake-data';
import words_panel from '../../shared/words.json';

class Category extends Component {
    params;
    fakeDataService;
    word = words_panel.category;
    constructor(props) {
        super(props);
        this.state = {
            loader: false,
            category_data: [],
            flex_data: null,
            maxwidth_data: null,
            height_data: null,
            count_call: ۰,
            cursor: ۰
        }
        this.fakeDataService = new fakeData();
        this.moveCoursor = this.moveCoursor.bind(this);
    }

    componentDidMount() {
        if (this.state.count_call === ۰) {
            this.dynamicDivCalc();
            this.setState({ count_call: ۱ })
        }
        this.params = this.props.match.params.id;
        this.handleData(this.params);
        window.addEventListener("keydown", this.moveCoursor);

    }

    componentWillReceiveProps(prevProps) {
        this.params = prevProps.match.params.id;
        this.handleData(this.params);
    }

    handleData(id) {
        this.setState({ loader: true });
        this.fakeDataService.getData(id).then(result => {
            this.setState({ loader: false, category_data: result })
        }).catch(err => {
            this.setState({ loader: false })
            throw err;
        })
    }

    moveCoursor(e) {
        let category, element_id;
        let { cursor, category_data } = this.state;
        let active_element = document.getElementsByClassName('is-active')[۰];

        if (active_element) {
            element_id = active_element.getElementsByClassName('item-image-wrapper')[۰].id;
        }
        if (element_id) {

            for (let index = ۰; index < category_data.length; index++) {
                if (category_data[index].id.toString() === element_id) {
                    category = category_data[index];
                }
            }

            if (e.keyCode === ۳۹ && cursor > ۰) {
                this.setState(prevState => ({
                    cursor: prevState.cursor - ۱
                }))
            } else if (e.keyCode === ۳۷ && cursor < category_data.length - ۱) {
                this.setState(prevState => ({
                    cursor: prevState.cursor + ۱
                }))
            } else if (e.keyCode === ۱۳) {
                this.props.history.push('/movie/' + category.id.toString())
            }
        } else {
            console.log("id not found!");
        }
    }

    checkStateCursor(e, index) {
        this.setState({ cursor: index })
    }

    componentWillUnmount() {
        window.removeEventListener("keydown", this.moveCoursor);
    }

    render() {
        let { category_data, loader, flex_data, maxwidth_data, height_data, cursor } = this.state;
        let words = this.word;
        return (
            <React.Fragment>
                <div className="content content-category">
                    <div className="row rc-grid">
                        {loader ? 'loading' : category_data ? category_data.map((data, i) => {
                            return <div style={{ flex: flex_data, maxWidth: maxwidth_data }}
                                className="col-۶ col-lg-۴ col-xl-۳" key={data.id} onMouseEnter={(e) => this.checkStateCursor(e, i)}>
                                < NavLink className={["item-link", cursor === i ? 'is-active' : ''].join(" ")} to={{ pathname: '/movie/' + data.id }}>
                                    <div id={data.id} className="item-image-wrapper">
                                        <img style={{ height: height_data }} className="item-image" src={data.image} alt={data.title} />
                                    </div>
                                    <div className="item-info">
                                        <h۶ className="item-fatitle">{data.title}</h۶>
                                    </div>
                                </NavLink>
                            </div>
                        }) : <div className="col-sm-۱۲">{words.notfound}</div>}
                    </div>
                </div >
            </React.Fragment >
        );
    }
}

export default Category;