"Synchronous XMLHttpRequest on the main thread is deprecated" error after authentication and redirect in reactjs

Question

I'm working on a react application wherein a user can register, and upon registering, the user would then be redirected to the home page.

Below is how I currently have my code.

The problem is after the user submits the registration form and the registration is successful, once the user is redirected I get the following warning message in the browser console:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

I tried two ways of redirecting, using history.push (passed as a prop from the Route component), and using the Redirect component once I update the state and RegisterForm is rerendered. The warning message is displayed regardless of which method I use.

My question is what am I doing wrong, and how do I fix this problem?

I've seen a lot of other questions regarding this issue, but they mostly just describe why this warning is getting displayed, but not necessarily how to fix the issue causing the warning.

class RegisterForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loggedIn: false,
            username: '',
            email: '',
            password: '',
            passwordConfirmation: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const name = target.name;
        const value = target.value;

        this.setState({
            [name]: value
        });
    }

    handleSubmit(event) {
        axios.post('/users/register', {
            email: this.state.email,
            username: this.state.username,
            password: this.state.password,
            password_confirmation: this.state.passwordConfirmation,
        })
        .then(response => {
            // const history = this.props.history;
            // history.push('/');

            this.setState({
                loggedIn: response.data.authenticated
            });
        })
        .catch(error => {
            console.log('Error registering user.');
        });

        event.preventDefault();
    }

    render() {
        const loggedIn = this.state.loggedIn;

        if (loggedIn) {
            return <Redirect push to="/" />
        }

        return (
            <form onSubmit={this.handleSubmit}>
                <div>
                    <label htmlFor="email">Email:</label>
                    <input type="email" id="email" name="email" value={this.state.email} onChange={this.handleChange} />
                </div>

                <div>
                    <label htmlFor="username">Username:</label>
                    <input type="text" id="username" name="username" minLength="3" maxLength="31" value={this.state.username} onChange={this.handleChange} />
                </div>

                <div>
                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" name="password" minLength="6" value={this.state.password} onChange={this.handleChange} />
                </div>

                <div>
                    <label htmlFor="passwordConfirmation">Confirm Password:</label>
                    <input type="password" id="passwordConfirmation" name="passwordConfirmation" minLength="6" value={this.state.passwordConfirmation} onChange={this.handleChange} />
                </div>

                <button type="submit">Register</button>
            </form>
        );
    }
}

function Register(props) {
    return (
        <div>
            <h1>Register</h1>
            <RegisterForm history={props.history} />
        </div>
    );
}

function App() {
    return (
        <div>
            <Router>
                <Header />

                <Switch>
                    <Route path="/register" component={Register} />
                    <Route path="/" component={Home} />
                </Switch>
            </Router>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById('app'));