几秒钟后自动从一个组件重定向到另一个组件-反应

Question

我尝试在几秒钟后将用户从一个组件重定向到另一个组件。

用户登陆页面，几秒钟后，他将自动重定向到另一页面。我曾想过要重定向一个动作，但是我不确定这是否是最好的主意（如果您有更简单的方法，我很感兴趣）。

到目前为止，我的代码：

基本组成部分：

import React, { Component } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { redirectToProfile } from "../../actions/searchActions";

class Search extends Component {
  componentDidMount() {
    setTimeout(this.props.redirectToProfile(this.props.history), 3000);
  }
  render() {
    return (
      <div>
        <h1>search page</h1>
      </div>
    );
  }
}

export default connect(
  null,
  { redirectToProfile }
)(withRouter(Search));

和动作：

export const redirectToProfile = history => {
  history.push("/");
};

到目前为止，我有一条错误消息：

动作必须是普通对象。使用自定义中间件进行异步操作。

经过研究后，我发现有人解决了中间件重装问题，但是我已经在使用它了，所以我不知道该怎么做。谢谢您的帮助。

Answer 1

为什么不使用提供的<Redirect/>组件react-router？我认为这更清晰，更符合React的声明式模型，而不是在命令式的重击/动作中隐藏逻辑。

class Foo extends Component {
  state = {
    redirect: false
  }

  componentDidMount() {
    this.id = setTimeout(() => this.setState({ redirect: true }), 1000)
  }

  componentWillUnmount() {
    clearTimeout(this.id)
  }

  render() {
    return this.state.redirect
      ? <Redirect to="/bar" />
      : <div>Content</div>
  }
}