React - 让用户保持在同一页面上 - 防止页面刷新答案

【问题标题】：React - Keeping user on same page - prevent page refreshReact - 让用户保持在同一页面上 - 防止页面刷新
【发布时间】：2020-07-29 20:01:50
【问题描述】：

我有一个 React/Redux 应用程序，它引导用户完成一些基本的设置步骤，最后一页是捕获和记录实时数据的页面。我不希望用户能够Ctrl+R、F5 或Ctrl+F5 并刷新页面。相反，我希望他们离开页面的唯一方法是单击“停止录制”按钮。

目前，应用程序是使用单个 HomeScreenComponent 构建的，我根据应用程序所处的模式交换页面的组件。例如，如果它处于设置模式，它将显示组件 A如果它处于录制模式，它将显示组件 B。

就目前而言，如果用户处于记录模式，他们可以执行Ctrl+R 并刷新页面，将您带回设置模式。

如何防止用户在未点击“停止录制”按钮的情况下刷新页面并离开？我可以想象有两种方法可以实现这一点：要么禁用刷新（但仅在记录模式下），要么允许刷新但让它什么都不做（并导航回我的记录模式状态）。

App.tsx

function App() {
    return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <React.Fragment>
                    <Route exact path="/"><Redirect to="/app" /></Route>
                    <Route exact path="/app" component={HomeScreenContainer} />
                </React.Fragment>
            </ConnectedRouter>
        </Provider>
    );
}

export default App;

HomeScreenComponent

export class HomeScreenComponent extends React.PureComponent<HomeScreenProps, FormState> {
    render() {
        return (
            <div>
                <Container>
                    {this.props.mode === SETUP_MODE && <SetupContainer />}
                    {this.props.mode === RECORD_MODE && <RecordingContainer />}
                </Container>
            </div>
        );
    }
}

在我的 Redux 状态下，应用程序的默认模式是SETUP_MODE

const defaultState: HomeScreenState = {
    mode: SETUP_MODE,
    ...// other stuff here
};

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

我认为您不能阻止浏览器的刷新操作，也不建议这样做。

您可以将变量存储为 cookie 或 localStorage 以便能够知道用户何时刷新、刷新前是否处于记录或设置模式。

【讨论】：

【解决方案2】：

您不能阻止页面刷新，但如果用户尝试离开页面并进行一些待处理的更改，您可以向用户显示警告/警报。

   if (somePendingChange) {
    window.onbeforeunload = () => true
  } else {
    window.onbeforeunload = undefined
  }

如果条件为真，它将向用户显示警报。

【讨论】：