a history supports only one prompt at a time

[gloriaJun]

Version

"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"redux": "^4.0.1",

Test Scenario

  const historyBlock = useCallback(() => {
    return history.block((location, action) => {
      console.log('#### history block', left?.type, action);
      if (left?.type === HEADER_TYPE.NONE && action === 'POP') {
        console.log('#### blocked ####');
        right?.callback();
        return false;
      }
    });
  }, [left]);

  useEffect(() => {
    const unlisten = historyListen();
    const unblock = historyBlock();
  }, [left]);

Error Log

a history supports only one prompt at a time

Solution

left 객체가 변경될 때마다 history 객체를 변경하려고 하여서 발생하는 에러인 것 같다. (history.block 실행 시에 전달받은 prompt가 기존에 있는 데 다시 생성하려고 하면 warning을 발생시키도록 되어있음 )

// https://github.com/ReactTraining/history/blob/master/modules/createTransitionManager.js
  function setPrompt(nextPrompt) {
    warning(prompt == null, 'A history supports only one prompt at a time');

    prompt = nextPrompt;

    return () => {
      if (prompt === nextPrompt) prompt = null;
    };
  }

해당 이슈를 해결하기 위해서 useEffect를 아래와 같이 수정하여 함수를 재생성 시점에 clear하고, 다시 생성하도록 하였다.

  useEffect(() => {
    const unlisten = historyListen();
    const unblock = historyBlock();

    return () => {
      console.log('clear');
      unlisten();
      unblock();
    };
  }, [left]);

References

• https://github.com/ReactTraining/history#blocking-transitions

[dooleyb1]

I know this issue is related to react-router-dom and not directly to your repository but I am also experiencing this. Did you manage to resolve your issue?