我尝试在几秒钟后将用户从一个组件重定向到另一个组件。
用户登陆一个页面,几秒钟后他会自动重定向到另一个页面。我想在一个动作中重定向,但我不确定这是否是最好的主意(如果你有更简单的方法,我很感兴趣)。
我目前的代码:
基本部件:
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("/");
};
到目前为止,我得到了一条错误消息:
动作必须是一般对象。请使用异步动作的自订中介软件。
经过一些研究,我看到一些人解决了中间件thunk的问题,但我已经在使用它,所以我不知道该怎么做。谢谢你的帮助。
4条答案
按热度按时间kdfy810k1#
为什么不使用
react-router
提供的<Redirect/>
组件呢?我认为这更清楚,更符合React的声明性模型,而不是将逻辑隐藏在命令式thunk/action中。kxeu7u2r2#
guicsvcw3#
如果您已经在使用redux形式转换,并且它包含在您的项目中,则可以按如下所示创建操作。
备选项:
如果调整Search组件的默认导出,也可以直接在组件中调用
history.push('/');
。这是首选方法,因为您不必创建额外的操作并通过redux调度它。将导出更改为...
然后在您的组件中按如下方式使用它...
j13ufse24#