使用 react-router 时，我刷新并丢失状态？

Question

我将先前获取的数据通过 location.state 传递给后续组件。 但是，如果用户点击刷新我的历史记录，并且位置状态对象被清除，则效果很好。 我可以看到这是预期的功能。 我的问题是，我应该使用 redux 来保持这些数据的持久性吗？ 如果是这样的话，我认为我失去了 react-router 的很多好处。 人们在使用 react-router 时如何处理状态？

Answer 1

您可以将状态作为props传递，或将其保存在localStorage 中以进行更广泛的访问。

Answer 2

为了能够持久化数据，您应该将数据存储在数据库或本地存储中，例如。 当您刷新页面时，您可以从商店中获取您的数据。

如果您的组件是类基组件，您可以使用 componentDidMount 来获取数据并设置状态或 redux。

如果您的组件是功能组件，您可以将 useEffect 用于相同的场景。（反应版本应大于 16.8）

https://reactjs.org/docs/react-component.html#componentdidmount

https://reactjs.org/docs/hooks-effect.html

Answer 3

可以使用localStorage()函数将数据本地存储在浏览器上。 也可以使用this.props.history.push函数将数据发送到下一个组件。 最后，我选择将数据保存在浏览器的本地存储中，因为我想在子反应组件中传递和访问数据并能够刷新页面。 通过将数据保存在本地存储中，数据会保留，而任何使用history.push()功能传递数据的情况下，点击刷新按钮后数据将被删除。

下面是一个示例，以防您想在子组件中传递pseudo变量的内容。

localStorage.setItem('pseudo', this.state.pseudo)

OR 

this.props.history.push({
  pathname: '/NextPage', 
  data: { pseudo: this.state.pseudo }
});

要获取子组件NextPage.js 中的数据，您可以使用以下代码：

props.location.data.pseudo

OR

localStorage.getItem("pseudo")

Answer 4

React-router 不关心状态管理。 要管理状态，请使用 Redux 或其他解决方案，例如 Xstate。 要在客户端上持久化数据，您可以查看localStorage