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>
  }
}

Answer 2

如果您已经在使用redux thunk并且它已包含在您的项目中，则可以按以下步骤创建操作。

Model(inputs=inputs, outputs=dense_out, name=name)

替代：
如果您调整搜索组件的默认导出，则也可以在组件中直接调用export const redirectToProfile = history => { return (dispatch, setState) => { history.push('/'); } }; // shorter like this. export const redirectToProfile = history => () => { history.push('/'); } // and even shorter... export const redirectToProfile = history => () => history.push('/');。这是首选方法，因为您没有创建其他操作并通过redux进行分派的开销。

将导出内容更改为...

history.push('/');

然后在您的组件中按以下方式使用它...

export default withRouter(connect(mapStateToProps)(Search));

Answer 3

state = {
    redirect: false // add a redirect flag
};

componentDidMount() {
    // only change the redirect flag after 5 seconds if user is not logged in
    if (!auth) {
        this.timeout = setTimeout(() => this.setState({ redirect: true }), 5000);
    }
}

componentWillUnmount() {
    // clear the timeer just in case
    clearTimeout(this.timeout);
}

render() {
    // this is the key:
    // 1. when this is first invoked, redirect flag isn't set to true until 5 seconds later
    // 2. so it will step into the first else block
    // 3. display content based on auth status, NOT based on redirect flag
    // 4. 5 seconds later, redirect flag is set to true, this is invoked again
    // 5. this time, it will get into the redirect block to go to the sign in page
    if (this.state.redirect) {
        return <Redirect to="/signin" />;
    } else {
        if (!auth) {
            return (
                <div className="center">
                    <h5>You need to login first to register a course</h5>
                </div>
            );
        } else {
            return <div>Registration Page</div>;
        }
    }
}

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

3 个答案: