使用 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 store：

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

当我刷新浏览器时，props.products 不再被识别，我在尝试读取未定义的属性时遇到错误。

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

Answer 1

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

Reloading url in browser in a React app using Redux and React Router causing store state to be undefined