React js Redirect Изменение состояния истории дросселирования

Попытка выполнить перенаправление на частный маршрут после успешного входа в систему и получения токена аутентификации из API и сохранения его в sessionStorage. В моем основном компоненте приложения я использую Switch:

<Switch>
    <Route exact path='/' component = {Home} />
    <Route path='/login' component = {Login} />
    <PrivateRoute path='/cpanel' component = {Cpanel} />
</Switch>

Частный маршрут определяется следующим образом:

const PrivateRoute = ({ component: Component, ...rest }) => (

   <Route { ...rest } render = {(props) => (
       sessionStorage.getItem('authToken') === true
         ? <Component { ...props } />
         : <Redirect to='/login' />
    )} />
);

В моем компоненте Login функция handleSubmit выглядит следующим образом:

handleSubmit(event) {

    // preventing default form behaviour from submitting..
    event.preventDefault();

    // extracting form data and resetting form fields..
    const form = event.target;
    const data = new FormData(form);
    form.reset();

    // send post request to API..
    axios.post(this.state.uri, {
        email: data.get('email'),
        password: data.get('password')
    })
        .then((response) => {
            // save authorization token in client side..
            sessionStorage.setItem('authToken', response.data.id);
            this.setState({ token: response.data.id });
            console.info('Login successful! Authorization token id: ' + sessionStorage.getItem('authToken'));
            this.props.history.push('/cpanel');
        }).catch((error) => {
            console.info(error);
        });

}

Я предполагаю, что это как-то связано с this.props.history.push (), потому что в методе рендеринга моего компонента Login я помещаю этот код перед возвратом JSX:

if (sessionStorage.getItem('authToken')) {
    return <Redirect to='cpanel' />
} else {
    console.info('Your authorization token is not set..');
}

Я очень ценю любой ответ, так как я пытался решить эту проблему самостоятельно в течение 2 дней. Заранее спасибо! Всем хорошего дня!

Кстати, я забыл указать характер ошибки: «Превышена максимальная глубина обновления. Это может произойти, когда компонент многократно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов».

Aitash Dongak 14.07.2018 04:22

Есть новости по этому поводу?

Leticia 27.11.2018 11:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
474
0

Другие вопросы по теме