Question

在尝试使用Redirect延迟5秒后，我尝试Switch或React-Router以下的Hero React组件。

<Redirect to="/home" />会将组件立即重定向到http://url.com/home。

有关如何处理此问题的任何建议？谢谢。

class Intro extends Component {
  render() {
    return (
      <div className="d-flex w-100 h-100 mx-auto p-4 flex-column">
        <Header />
        <div 
          style={{
            paddingTop: '40px'
          }}>
        </div>
        <Hero />
        <Footer />
      </div>
    );
  }
}

export default Intro;

我也尝试过使用setTimeout

Answer 1

您可以使用history注入的react-router属性，并在push内调用setTimeout方法。您应该在componentDidMount中进行此操作：

constructor(props) {
  // ...
  this.redirectTimeout = null;
}

componentDidMount() {
  const { history } = this.props;
  this.redirectTimeout = setTimeout(() => {
    history.push('/home')
  }, 5000);
}

编辑：请确保清除超时，以避免在5秒结束之前移出页面时进行重定向，否则您仍将获得重定向：

componentWillUnmount() {
  clearTimeout(this.redirectTimeout);
}

Answer 2

您可以创建一个自定义的DelayRedirect组件。

要点在这里：https://gist.github.com/JT501/4b0f60fb57b1410604b754fd9031150a

import * as React from 'react';
import { useEffect, useState } from 'react';
import { Redirect, RedirectProps } from 'react-router';

interface DelayProps {
  delay: number;
}

const DelayRedirect = ({ delay, ...rest }: RedirectProps & DelayProps) => {
  const [timeToRedirect, setTimeToRedirect] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setTimeToRedirect(true);
    }, delay);
    return () => clearTimeout(timeout);
  }, [delay]);

  return timeToRedirect ? <Redirect {...rest} /> : null;
};

export default DelayRedirect;

用法：

<DelayRedirect to={'/'} delay={1000} />

重定向目标网页组件5秒

2 个答案: