Question

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

Answer 1

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

Answer 2

为了能够持久存储数据，您应该将数据存储在数据库或本地存储中作为示例。而且，刷新页面后，您可以从商店中获取数据。

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

如果您的组件是功能组件，则可以在相同的情况下使用useEffect。（react版本应该大于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

反应路由器与状态管理无关。要管理状态，请使用Redux或其他解决方案，例如Xstate。要在客户端上保留数据，您可以查看localStorage

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

4 个答案: