почему я получаю два результата для одного и того же URL в маршрутизации реагировать?

Question

Я создал демонстрационный проект, чтобы проверить, будет ли динамическая маршрутизация работать или нет !!!

в этом проекте я сталкиваюсь с проблемами для двух маршрутов:

1. gj: jquery
2. ghj: jquery

Здесь я передаю параметр jquery, и этот маршрут будет отображаться в динамическом компоненте.

в динамическом компоненте Iвозвращаю некоторый текст на основе страницы и типа страницы.мой код, как показано ниже.

componentDidMount() {
        console.log(this.props);
        let pagetype = Object.values(this.props.match.params)[0];

    let page2=this.props.location.pathname.split(":")[1];
    let pageName=this.props.location.pathname.split(":")[0].replace("/","");

    //alert("Hello, My type is " + pagetype);
    this.setState({
        type:page2,
        page:pageName
    })
}

 _getCurrentPage=()=>{
        switch(this.state.type){
            case "image":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            case "formio":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            case "jquery":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            case "website":
                return (<h1>pageName: {this.state.page}  pagetype:{this.state.type}</h1>);
            default:
                return (<h1>No match</h1>);

        }
    }

 render(){

    return(
       this._getCurrentPage()
    )

Теперь здесь для выше двух маршрутов, я получаю вывод в течение двух раз что-то вроде ниже пары.

, если я сначала нажимаю на любой другой маршрут, а затемнажмите gj> ghj и ghj> gj Я получаю следующий вывод

pageName: gj pagetype:jquery
pageName: ghj pagetype:jquery

pageName: gj pagetype:jquery
pageName: gj pagetype:jquery

, если я сначала нажму на любой другой маршрут, а затем нажмите ghj> gj и gj> ghj, я получаю следующий вывод

pageName: ghj pagetype:jquery
pageName: gj pagetype:jquery

pageName: ghj pagetype:jquery
pageName: ghj pagetype:jquery

в чем может быть причина для рендеринга текста два раза? Я зарегистрировал pageType, pageName, и, кажется, все в порядке.для других маршрутов работает нормально.