Question

我希望在每个React-Router页面更改时分派一个动作，然后由reducer拦截。

我的用例是：我的页面状态保存在redux存储中。状态表示为{loading, finished}。当用户单击按钮时，将向服务器发出请求，并且loading变为true。当响应返回肯定时，loading变成false，而finished变成true。当用户离开页面时，我希望将状态重置为其初始值（loading = false，finished = false）。

以下答案很好，但是由于onEnter onChange和onLeave被删除了，因此在v4上不再可用。

React Router + Redux - Dispatch an async action on route change?

编辑：最好的解决方案是扩展性。将来会有多个这样的页面，并且每个页面的状态都应在页面导航时重置

谢谢！

Answer 1

您可以分别创建自己的history实例，并听取它并在发生更改时调度操作。

示例

// history.js
import createHistory from 'history/createBrowserHistory';

const history = createHistory();

history.listen(location => {
  // Dispatch action depending on location...
});

export default history;

// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';

class App extends React.Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    )
  }
}

Answer 2

v4具有location对象，该对象可用于检查应用程序是否已离开当前页面。

https://reacttraining.com/react-router/web/api/location

react-router v4在页面更改上调度redux操作

2 个答案: