解决这个问题的方法是使用react-router
库提供的withRouter
高阶组件。
当按下RN应用程序上的后退箭头时,react-router
库会处理导航并渲染相应的组件。但是,Redux store连接的组件不会重新渲染,因为它们没有props的改变。为了解决这个问题,我们可以使用withRouter
高阶组件将组件包裹起来,以便在路由导航时强制重新渲染。
以下是一个示例代码,演示如何使用withRouter
高阶组件解决这个问题:
import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
// 定义一个Redux store连接的组件
class MyComponent extends React.Component {
// 组件的代码...
render() {
// 渲染组件
return (
{/* 组件的内容 */}
);
}
}
// 使用connect函数连接Redux store和组件
const ConnectedComponent = connect(mapStateToProps)(MyComponent);
// 使用withRouter高阶组件包裹连接的组件
const RoutedComponent = withRouter(ConnectedComponent);
export default RoutedComponent;
在上面的代码中,我们首先定义了一个Redux store连接的组件MyComponent
。然后,我们使用connect
函数将Redux store和组件连接起来,得到一个连接的组件ConnectedComponent
。最后,我们使用withRouter
高阶组件将连接的组件包裹起来,得到一个路由连接的组件RoutedComponent
。这样,当按下RN应用程序上的后退箭头时,路由导航会强制重新渲染组件。
请注意,为了使用withRouter
高阶组件,需要将组件包裹在React Router
的
或
组件中。