使用Redux和React Router在React应用中的浏览器中重新加载url导致存储状态未定义

Question

我正在使用带有react-redux和react-router的create-react-app。

<SingleProduct />就是这样定义的

function SingleProduct(props){
let id=  props.match.params.id
let products = props.products
return (display the matching product properties)
}

渲染<SingleProduct />时，它依赖于通过路由接收的ID。 然后，它在props.products中搜索ID以获取该特定产品属性。 <SingleProduct />如此连接到redux存储：

function mapStateToProps(state){
return {
products: state.products}
}

刷新浏览器时，props.products不再被识别，并且在尝试读取undefined属性时出现错误。

如何解决此问题？是路由问题（客户端路由）还是其他问题？我弹出应用程序，尝试调整Webpack配置以解决客户端路由，但没有成功。 请注意，我正在通过REST API获取产品。 任何帮助表示赞赏。

Answer 1

您需要在项目中使用localstorage或redux-persist，以在重新加载url后保留存储的状态数据 https://www.npmjs.com/package/redux-persist