Как изменить цвет кнопки и одновременно изменить маршрут реакции на нажатие кнопки в реагировании

Question

У меня есть 3 кнопки: Exchange, Queue и Consumer.В функции «onclick () я хочу изменить цвет каждой кнопки. В то же время я хочу изменить их маршруты, чтобы при нажатии каждой кнопки отображались разные компоненты.

<Link className={classes.link} to="/exchange">
                        <Button
                            variant="outlined"
                            style={{
                                backgroundColor: 
this.state.bgColorExchange,
                                color: this.state.foreColorExchange
                            }}
                            className={classes.button}
                            onClick={this.onClickExchange}
                        >
                            Exchanges
                        </Button>
                    </Link>
                </Tooltip>
                <br />
                <Tooltip title="all Queues in the broker">
                    <Button
                        variant="outlined"
                        style={{
                            backgroundColor: this.state.bgColorQueue,
                            color: this.state.foreColorQueue
                        }}
                        className={classes.button}
                        onClick={this.onClickQueue}
                    >
                        <Link className={classes.link} to="/queue" />
                        Queues
                    </Button>
                </Tooltip>
                <br />

                <Tooltip title="consumers for a specific queue">
                    <Button
                        variant="outlined"
                        style={{
                            backgroundColor: this.state.bgColorConsumer,
                            color: this.state.foreColorConsumer
                        }}
                        className={classes.button}
                        onClick={this.onClickConsumer}
                    >
                        <Link className={classes.link} to="/consumer" />
                        Consumers
                    </Button>
                </Tooltip>

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

конструктор (props) {super (props);

    this.state = {
        buttonclicked: false,

        buttonName: '',
        open: false,
        scroll: 'paper',
        bgColorExchange: '#00897b',
        bgColorQueue: '#00897b',
        bgColorConsumer: '#00897b',
        bgColorHome: '#00897b',
        foreColorExchange: 'white',
        foreColorQueue: 'white',
        foreColorConsumer: 'white',
        foreColorHome: 'white',
        redirect: false
    };
}

onClickExchange = () => {
    this.setState({
        bgColorExchange: 'white',
        foreColorExchange: 'black',
        bgColorQueue: '#00897b',
        foreColorQueue: 'white',
        bgColorConsumer: '#00897b',
        foreColorConsumer: 'white'
    });
};

onClickQueue = () => {
    this.setState({
        bgColorQueue: 'white',
        foreColorQueue: 'black',
        bgColorExchange: '#00897b',
        foreColorExchange: 'white',
        bgColorConsumer: '#00897b',
        foreColorConsumer: 'white'
    });
};

onClickConsumer = () => {
    this.setState({
        bgColorConsumer: 'white',
        foreColorConsumer: 'black',
        bgColorQueue: '#00897b',
        foreColorQueue: 'white',
        bgColorExchange: '#00897b',
        foreColorExchange: 'white'
    });
};

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