React Link не перезагружает компонент

Question

У меня есть этот код

<Link to = {`/technology/${technology.parent.seoName}`}
                          className = "text-warning font-weight-bold font-size-h6">
                        {technology.parent.name}
                    </Link>

внутри функционального компонента, используемого в компоненте на основе классов. Компонент на основе класса направляется на этот маршрут<ContentRoute path = "/technology/:techName" exact component = {TechnologySummary}/>. Теперь, когда я приезжаюhttp://localhost:3000/metro/technology/a42например (метро - baseurl). он работает компонент загружен.

теперь на этой странице у меня есть ссылка на другую страницу технологий, например: technology/a37. и я использую приведенный выше код. Однако, когда я нажимаю ссылку, URL-адрес меняется наhttp://localhost:3000/metro/technology/a37 ИСКЛЮЧАЯ компонент НЕ загружен. и ничего не меняется. mapStateToProps, конструктор, componentDidMount ни один из них не выполняется.

Как я могу повторно запустить компонент, щелкнув ссылку выше?

EDIT1: Функциональный компонент

const Display = (props) => {
    
    if (technology) {
        
        if (technology.parent) {
            parent =
                <div className = "bg-light-warning px-6 py-8 rounded-xl mr-7 mb-7">
                    <span className = "svg-icon svg-icon-3x svg-icon-warning d-block my-2">
                        <Image src = {technology.imageLink} rounded width = "20"/>
                    </span>
                    <Link to = {`/technology/${technology.parent.seoName}`}
                          className = "text-warning font-weight-bold font-size-h6">
                        {technology.parent.name}
                    </Link>
                </div>
        }
        show = (
            <Auxiliary>
                ...
                            {parent}
                            ...
            </Auxiliary>
        );
    }

    return (
        show
    );
}

export default Display;

На основе класса

class TechnologySummary extends Component {
    state = {
        link: true,
        technologySeoName: null
    }

    componentDidMount() {
        if(this.state.link){
            this.props.onLoadTechnology(this.state.technologySeoName);
        }
    }

    constructor(props) {
        super(props);
        let technologySeoName = null;
        technologySeoName = props.match.params.techName;
        console.log('technologySeoName', technologySeoName);
        this.state.technologySeoName = technologySeoName;
    }

    render() {
        return <Display technology={this.props.technology}
                        deleteVersion={this.deleteVersion}/>;
    }
}
const mapStateToProps = state => {
    return {
        technology: state.technology.technology
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onLoadTechnology: (technologySeoName) => dispatch(actions.onLoadTechnology(technologySeoName)),
        onDeleteTechnology:(id) => dispatch(actions.onDeleteTechnology(id))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(TechnologySummary);