gpt4 book ai didi

reactjs - 如何使用浏览器后退按钮跳转到 Redux 状态

转载 作者:行者123 更新时间:2023-12-03 14:19:10 25 4
gpt4 key购买 nike

我是一个 React 初学者,我有一个使用 React Router (4.2.2)、Redux 的项目,我最近添加了 React-router-redux 希望它能解决我的问题。我有一些组件,其 redux 存储状态需要根据与浏览器后退和前进按钮的交互进行更改。

例如,我有一个屏幕,其中包含用户单击的元素的详细信息。如果我使用浏览器后退按钮并导航到历史记录中打开详细信息 View 的另一个点,它将仅显示最新的元素信息(因为存储中的唯一信息),或者有时根本不会显示任何信息通过了。

我认为react-router-redux会帮助我保持这两者同步,但也许我错过了实现这一点的步骤。我已经安装了 Redux 调试工具,并且可以在其中看到我想要跳转到的状态,但是当用户使用后退按钮时如何启用它?每次查看详细信息页面的 URL 都是相同的,也许我需要添加包含特定信息的哈希标签,但即便如此,我将如何在商店中查找正确的信息?

我像这样打开详细信息 View :

<Link to='/activityDetails'>
<ActivityButton
id={this.props.someData.someId}
/>
</Link>

在 ActivityButton 内部:

openActivityDetails = () => {
this.props.showActivityDetailsScreen(this.props.id);
};

function matchDispatchToProps(dispatch) {
return bindActionCreators({
showActivityDetailsScreen: activityDetailsActions.showActivityDetails
}, dispatch)
}

render(){
return (
<div className={'activity-button'} onClick={this.openActivityDetails}>
<img
onClick={this.handleClick}
src={imgPath}
/>
</div>
);
}

最佳答案

所以我自己想出了办法。本质上,您需要做的是在创建它时设置状态信息,如下所示:

<Link to={{
pathname: '/activityDetails',
state: { "activityData": activityData }
}}>
<ActivityButton
id={this.props.someData.someId}
/>
</Link>

然后在类中您需要信息 ActivityDetails 在我的例子中您可以这样查询:

 var actData = this.props.location.state.activityData;

或者,如果您使用 withRouter 和历史记录,它也位于以下位置:

const { history: { push } } = this.props;
history.state.state.activityData

我最终删除了react-router-redux,因为它没有必要。它使用当前路线在该州创建了一个条目,但就我而言,这没有用。希望这对将来的人有所帮助。

关于reactjs - 如何使用浏览器后退按钮跳转到 Redux 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48834225/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com