Блог

У меня есть этот компонент, который перенаправляет пользователя по щелчку мыши на другой путь, связанный с компонентом.

         return (
          <Item
            key={id}
            onClick={() =>
            history.push({
                    pathname: '/path/login',
                    state: {
                      requiredAction: name,
                    },
                  })
            }
            description={description}
          />
        );
 

мой компонент входа в систему выглядит следующим образом:

 export default withRouter(function FormCard(props) {

  let { location } = props;

  return (
    <div className="text-center">

      {location.state.imageData amp;amp; (
        <Image className={location.state.imageData} />
      )}

      <div className="heading mb-5 pt-2">
          <FormattedMessage defaultMessage="Access your  account" />
        )}
      </div>


      <div>
        <input
          className="email-form"
          type="email"
          inputMode="email"
          onChange={changeEmail}
        />
      </div>
    </div>
  );
});

 

Маршрут определяется следующим образом:

   <Route
     exact
     path="/path/login"
     render={() => <FormCard {...this.props} />}
   />
 

==========================

Возможно ли , чтобы я добавил некоторую логику history.push после первоначального щелчка, которая запускает анимацию для перемещения вправо компонента входа в систему, вместо того, чтобы просто отображать его?

Да, вы можете добавить немного логики history.push . Я предлагаю вам прислушаться в своем /path/login состоянии для пройденного состояния, вот так:

Пример компонента (в вашем случае /путь/логин):

 const App = (props) => {
  const {location} = props;
  
  useEffect(()=>{
  
  if(location.state.PASSED_VAL){
    // Do something 
  }
  },[location.state])
}

return (...)


}