reactjs - Ionic 4 - [React] アクティブ/選択された IonTabButton を外部ボタンで変更する方法

Question

私は 6 つの IonTabs を持っています。最初のタブには、「メイン ページ」になるようにボタンが隠されています。他のタブは正常に機能し、「メイン ページ」(最初のタブ) に戻るボタンがあります。このボタンは「メイン ページ」にリダイレクトされますが、IonTabBar DOM のプロップ「選択されたタブ」は変更されません。表示されている IonTabButtons のいずれかをクリックせずに、このプロップを変更するにはどうすればよいですか?

タブ付きコンポーネント:

class Main extends React.Component<{}, { active: string, path: string, selected: string }> { 
    constructor(props: any){
        super(props);

        this.state = {
            active: '',
            path: '',
            selected: '',
        };

    }

    componentWillMount(){
        this.setState({ path: '/chat', selected: 'chat' });
        this.forceUpdate();
    }



    render(){
        return (
            <IonApp>
            <IonReactRouter>
                <IonTabs>
                    <IonRouterOutlet>
                        <Route path="/chat" component={Chat} exact={true} /> **MAIN PAGE**
                        <Route path="/contato" component={Contato} exact={true} />
                        <Route path="/recebimento" component={Recebimento} exact={true} />
                        <Route path="/pagamento" component={Pagamento} exact={true} />
                        <Route path="/dashboard" component={Dashboard} exact={true} />
                        <Redirect path="/main" to="/chat" />
                    </IonRouterOutlet>

                    <IonTabBar slot="bottom" current-path={this.state.path} selected-tab={this.state.selected}>
                        <IonTabButton className="d-none bg-tiber" tab="chat" href="/chat">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="contato" href="/contato">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="recebimento" href="/recebimento">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="lara" href="/lara">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="pagamento" href="/pagamento">
                        </IonTabButton>
                        <IonTabButton className="bg-tiber" tab="dashboard" href="/dashboard">
                        </IonTabButton>
                    </IonTabBar>
                </IonTabs>
            </IonReactRouter>
        </IonApp>
        );
    }
}

ダッシュボード (戻るボタンのあるタブの例):

class Dashboard extends React.Component<{}, {goBack: boolean}>{
    constructor(props: any){
        super(props);
        this.state = {
            goBack: false,
        };

        this.voltar = this.voltar.bind(this);
    }

    voltar(){
        this.setState({ goBack: true });
    }

    render(){
        return (
            this.state.goBack === true ? 
            <Redirect to="/main" /> :

            <IonPage>
            <IonHeader>
                <IonToolbar>
                    <div className="d-flex">
                        <button className="btn" onClick={this.voltar}><i className="fas fa-arrow-left" /></button>
                        <IonTitle>Novo Dashboard</IonTitle>
                    </div>
                </IonToolbar>
            </IonHeader>
            <IonContent>

            </IonContent>
            </IonPage>
        );
    }
};

IonTabBar DOM の結果 (1 つのタブを開いてボタンをクリックして戻ると):

<ion-tab-bar slot="bottom" current-path="/main" selected-tab="dashboard" role="tablist" class="md hydrated">