Реактивная условная маршрутизация с использованием navlink

Question

У меня есть кнопка входа, которая должна направлять пользователей на страницу приветствия, если и только если они аутентифицированы.

Это мой класс App, который управляет маршрутизацией.

import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import SignIn from './ScreenViews/SignIn'
import Welcome from './ScreenViews/Welcome'

class App extends Component {

    render() {
        return(

            <BrowserRouter>
                <Switch>
                    <Route path= "/signin" component={SignIn}/>
                    <Route path= "/welcome" component={Welcome}/>
                </Switch>
            </BrowserRouter>

        )
    }
}
export default App;

Внутри моего класса входа в систему у меня есть кнопка входа, завернутая в тег NavLink, подобный следующему:

<NavLink to = "./welcome">
    <Button submit primary>
        Login
    </Button>
</NavLink>

Этот компонент обернут в форму, поэтому, когда пользователи нажимают на кнопку входа, вызывается функция обратного вызова, и в этой функции я делаю пост-запрос и хочу разрешить пользователям переходить на страницу приветствия только в случае получения действительного ответа. , Функция On submit выглядит следующим образом:

handleSubmit = event => {
    const { email, password } = this.state;
    axios.post('/api/authenticate', {
      email: email,
      password: password
    })
    .then(function (response) {
        //If we are here, users should be allowed to direct to welcome page
    })

Как я могу сделать так, чтобы пользователи направлялись на страницу приветствия, если и только если я получу ответ. Прямо сейчас он направляет на страницу независимо.

Заранее спасибо