Блог

Я написал Login компонент, который содержит перехват useEffect , который должен обращаться к history объекту компонента:

 export default (props: { children: React.ReactNode }) => {
    const alertContext = useContext(AlertContext);
    const authContext = useContext(AuthContext);

    const { setAlert } = alertContext;
    const { login, error, clearErrors, isAuthenticated } = authContext;

    useEffect(() => {
        if (isAuthenticated) {
            props.history.push('/');
        }

        if (error === 'Invalid Credentials') {
            setAlert(error, 'danger');
            clearErrors();
        }
        // es-lint-disable-next-line
    }, [error, isAuthenticated, props.history]);
  

несмотря на то, что я определил React.ReactNode как props тип для компонента, я получаю:

Свойство ‘history’ не существует для типа ‘{ дочерние элементы: ReactNode; }’

Эта ошибка возникает в этой строке:

 props.history.push('/');
  

Как я могу это исправить?

В зависимости от вашего компонента, который является функциональным компонентом, вы можете useHistory() вместо этого использовать hook:

React Router поставляется с несколькими перехватами, которые позволяют вам получать доступ к состоянию маршрутизатора и выполнять навигацию внутри ваших компонентов.

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

Вы можете импортировать его как:

 import { useHistory } from "react-router-dom";
  

Итак, попробуйте выполнить следующее:

 export default (props: { children: React.ReactNode }) => {
   const history = useHistory()

   // rest of the code
}
  

Затем используйте без props as:

 history.push('/');