防止页面在浏览器后退导航中加载答案

【问题标题】：Prevent a page to load on browser back navigation防止页面在浏览器后退导航中加载
【发布时间】：2022-01-18 05:12:32
【问题描述】：

在我的 React 应用程序中，我有 3 个页面，分别是 a、b、c。

我从 'a' - 'b' - c（在表单提交到） - 'b' 导航。
现在我在页面“b”并单击浏览器返回。
我被带到“c”页检查条件，如果失败，我应该被带回“b”页并进一步按下返回按钮到“a”页，因为它是前一页到“b”页' 根据应用流程。
不应允许用户再次访问页面“c”。
我尝试使用 history.replace 执行此操作，但它没有替换历史堆栈中的页面“c”条目，并且用户继续在页面 b 和页面 c 之间导航。

请分享任何见解...

【问题讨论】：

我认为“b”和“c”之间的交互应该是重定向，所以从任何一个返回导航都返回到“a”。如果用户从“c”退回到“a”并尝试再次前进，“c”将重定向到“b”。用户现在可以返回“a”或通过“b”转到“c”。有意义吗？

标签： reactjs react-router history browser-history

【解决方案1】：

也许你可以做这样的事情

首先，如果 blabla 无法访问页面“c”，您需要创建自定义路由来验证您的条件；

import { Redirect, Route, RouteProps } from 'react-router';

const ValidateRoute = (props) => {
  const { component, children, ...rest } = props;

  return (
    <Route
      {...rest}
      render={(routeProps) =>
        <place your condition here> ? (
          Component ? (
            <Component {...routeProps} />
          ) : (
            children
          )
        ) : (
          <Redirect
            to={{
              pathname: '/',
            }}
          />
        )
      }
    />
  );
};

export default ValidateRoute;

然后用 ValidateRoute 包装你的 C 路由

<ValidateRoute component={c component} path="c path"/>

【讨论】：

【解决方案2】：

如果是您的情况，您可以使用 useHistory .replace 挂钩将您的用户重定向到特定页面，或者您可以为您的路线设置一个警卫“我个人更喜欢这种方法”。

我想为您提供一个代码示例，但在以下网站上找到了一个很好的示例，因此请访问它。 https://blog.netcetera.com/how-to-create-guarded-routes-for-your-react-app-d2fe7c7b6122

【讨论】：