使用 redux 中间件控制 React-router 导航

Question

在 Redux 中间件功能的帮助下，当离开播放页面时，我会显示警告模式。

问题是我现在无法控制导航。在模式显示之前页面已更改。

有什么方法可以阻止路由器导航并根据模式选择做出决定吗？

middleware.push(routeIntrerceptor);

.....

const routeIntrerceptor = ({dispatch, getState}) => next => action => {
  const state = getState();
  const location = state.router.location.pathname;

  if (action.type === '@@router/LOCATION_CHANGE' && location.includes('play')) {
    dispatch({ type: 'SET_DIALOG_TOGGLE' });
  }
  next(action);
};

export default routeIntrerceptor;

Answer 1

如果你想阻止用户离开页面，你可以使用它<Prompt />附带的react-router。

查看react-router的文档 -

https://reacttraining.com/react-router/web/example/preventing-transitions