Ошибка «Синхронный XMLHttpRequest в главном потоке устарела» после аутентификации и перенаправления в реактив

Question

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

Ниже показано, как у меня в настоящее время есть мой код.

Проблема в том, что после того, как пользователь отправил форму регистрации и регистрация прошла успешно, после перенаправления пользователя в консоли браузера появляется следующее предупреждение:

[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/.

Я пробовал два способа перенаправленияиспользуя history.push (передаваемый в качестве опоры от компонента Route) и используя компонент Redirect после обновления состояния и повторного отображения RegisterForm. Предупреждающее сообщение отображается независимо от того, какой метод я использую.

У меня вопрос, что я делаю не так, и как я могу исправить эту проблему?

Я видел много других вопросов. относительно этой проблемы, но они в основном просто описывают, почему отображается это предупреждение, но не обязательно, как устранить проблему, вызывающую предупреждение.

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'));