Question

我的redux商店中有一个message属性，它所在的消息显示在“页面”的顶部。例如“您的请求已被接受”等。但是，每当用户选择转到不同的“页面”时，该消息应该消失。

换句话说，我想要类似于django.contrib.messages的内容，其中消息只持续到下一个请求。除了在“SPA”中没有请求，只有React Router切换“页面”。

我认为这应该在React Router上实现（例如，通过某种方式在每次页面转换时运行自定义函数），但我真的不知道。

是否有实现这一目标的标准方法？

Answer 1

您可以将历史库与react-router v4一起使用。我没有你所有的代码，但你可以做我上面展示的事情

import createHistory from 'history/createBrowserHistory'
import {Router} from 'react-router-dom'

const history = createHistory();

history.listen((location, action) => {
  console.log(location);
  // something to cleanup the message can be a function or a state change
});

<Router history={history}>
 // router rules
</Router>

Answer 2

您可以使用react-router-redux来保持您的状态与您的路线同步。之后，您可以设置一个缩小器来捕获LOCATION_CHANGE取消设置商店的消息属性。

此解决方案将在历史记录每次更改后重置邮件。

有关详细的文档检查https://github.com/reactjs/react-router-redux

每次路由更改时如何显示消息并将其删除

2 个答案: