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

Question

Я пытаюсь реализовать переходную маршрутизацию к страницам с использованиемact-router. Как я могу реализовать тайм-аут, чтобы несколько анимаций происходили до того, как я go перейду на следующий экран

Я вставлю код:

App.jsx

export default function App() {
  return (
    <Router>
      {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
      <Switch>
        <Route exact path="/">
          {/* {({ match }) => ( */}
          <Transition in timeout={500}>
            {state => <SignIn state={state} />}
          </Transition>
          {/* })} */}
        </Route>
        <Route path="/signup">
          <Transition timeout={500}>
            {state => <SignUpOptions state={state} />}
          </Transition>
        </Route>
        <Route path="/personal-info">
          <Transition timeout={500}>
            {state => <PersonalInformation state={state} />}
          </Transition>
        </Route>
        <Route path="/signup-verification">
          <SignUpVerification />
        </Route>
      </Switch>
    </Router>
  );
}

Страница входа в систему

const SignIn = ({ state }: Props) => {
  const history = useHistory();
  return (
    <ScreenDiv>
      <ImageContainer animateToLeft={state === 'entered'}>
        <ImageDivFemale />
      </ImageContainer>
      <FormDiv>
        <SignInInput placeholder="Username" />
        <SignInInput type="password" placeholder="Password" />
        <SignUpButton
          style={{
            cursor: 'pointer',
          }}
        >
          {SIGN_IN}
        </SignUpButton>
        <ForgotUsernameParagraph>
          {FORGOT_USERNAME_PASSWORD}
        </ForgotUsernameParagraph>
        <SignUpParagraph
          style={{ cursor: 'pointer' }}
          onClick={() => {
            history.push('/signup');
          }}
        >
          {NO_ACCOUNT_YET}
        </SignUpParagraph>
      </FormDiv>
    </ScreenDiv>
  );
};

export default SignIn;

Поэтому, когда я нажимаю {NO-ACCOUNT-YET}, я хочу отложить маршрут до '/ signup', чтобы я мог применить переходы css. Также, как я могу вызвать анимацию css в css компонента styleled после нажатия кнопки мыши

Спасибо

Answer 1

Вы пробовали:

onClick={
          () => { 
              setTimeout(() => {history.push('/signup')}, 500);
          }
        }