reactjs - 使用 react-router-dom 5 防止有条件地返回

Question

useEffect(() => {
    return history.listen(_ => {
        console.log(history.action);
        if (history.action === 'POP' && (location.pathname === Settings_NewPersonPath || location.pathname === Settings_NewBusinessPath) && entityState.data) {
            setEntityState({
                ...entityState,
                submitted: false
            });
        }
    })
}, [])

我正在模拟使用状态的多个页面。然而，当有人在第二个“页面”上，他们按下后退按钮时， 我只想更新状态而不是实际返回。
我该怎么做？

Answer 1

您可以使用 history.block 防止页面转换的 API。例子:

useEffect(() => {
  const unblock = history.block(({ action, location, retry }) => {
    // Conditional state manipulation
    // Call unblock and retry to actually perform transition
  });

  return () => {
    unblock();
  };
}, []);