Перейдите на другую страницу при успешном входе

Question

App.tsx

import React from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch
} from 'react-router-dom';
import './app.css';

import Login from './auth/pages/login';
import DashBoard from './dashboard/dashboard';

export const App = () => {
  return (
    <div className="app">
      <Router>
        <Switch>
          <Route path="/auth/login" component={Login} />
          <Route path="/dashboard" component={DashBoard} />
          <Redirect from="/" exact to="/auth/login" />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

login.tsx

import { useHistory } from 'react-router-dom';
const authHandler = async (email, password) => {
  const history = useHistory();
  try {
    const authService = new AuthService();

    await authService
      .login({
        email,
        password
      })
      .then(() => {
        history.push('/dashboard');
      });
  } catch (err) {
    console.log(err);
  }
};

Из приведенного выше кода я пытаюсь перейти к панели мониторинга при успешном входе в систему. Функция обработчика аутентификации вызывается после нажатия кнопки отправки. Данные для входа успешно получены в функции authhandler, но как только я использую историю для навигации, я получаю следующую ошибку

"Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component"

Answer 1

Проблема в том, что authHandler является асинхронной c функцией и использование ловушки внутри «нормальной» функции не работает. Это нарушает правило хуков .

Что вам нужно сделать, это отделить authHandler и history.push('/dashboard').

Что вы можете сделать, это вернуть асин c запросите и используйте .then для вызова history.push.

const authHandler = async (email, password) => {
    const authService = new AuthService();
    // returning the request
    return await authService
      .login({
        email,
        password
      })
};

И внутри вашего компонента вы используете ловушку useHistory и вызываете authHandler для какого-либо действия.

const MyComponent = () => {
    const history = useHistory()

    const onClick = (email, password) => {
        authHandler(email, password) 
            .then(() => history.push('/dashboard'))
    }
    return (...)
}

Answer 2

Текст ошибки довольно понятен. Вы не можете вызвать useHistory или любой другой хук вне функционального компонента. Кроме того, хуки должны вызываться безоговорочно поверх компонента. Попробуйте вызвать useHistory внутри вашего фактического компонента и передать history в качестве параметра authHandler.