时间戳

首页 > 解决方案 > 使用 Redux 和 React Router 在 React 应用程序的浏览器中重新加载 url 导致存储状态未定义

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

问题描述

我正在使用带有 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。然后它在里面搜索 idprops.products以获取特定的产品属性。 <SingleProduct />像这样连接到 redux 商店：

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

当我刷新浏览器时，props.products不再识别，并且尝试读取未定义的属性时出现错误。

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

标签： reactjsreact-reduxreact-router-v4

解决方案

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

推荐阅读