在React中重定向用户的最佳实践是什么？

Question

应用程序流程:对于尚未注册的用户，登陆页面->电子邮件墙->计划选择页面->帐户创建页面->支付页面

问题是:当用户登陆支付页面，并在浏览器选项卡上回击箭头时，他们会再次登陆电子邮件墙页面。(代码允许跳过创建帐户和显示计划选择页面)，因此当他们在计划选择页面上单击“后退”按钮时，他们会再次看到电子邮件墙。

我不需要显示其网址为“/”的电子邮件墙页面

问:在这个网址下显示另一个页面的最好方法是什么？哪些东西可能属于“劫持”用户后退按钮的范畴？

我的一些想法是重定向/返回另一个组件/操作用户历史记录。

Answer 1

为了防止用户在点击支付页面上的back按钮时看到电子邮件墙页面，您可以使用来自history.replace库的history方法。此方法允许您将当前的历史记录项替换为新的记录项，以便当用户单击“后退”按钮时，它们将被重定向到另一个页面，而不是电子邮件墙页。

下面是一个示例，说明如何使用history.replace方法在用户单击back按钮时将用户从支付页面重定向到计划选择页面：

import React from "react";
import { useHistory } from "react-router-dom";

const PaymentPage = () => {
  const history = useHistory();

  useEffect(() => {
    // Replace the current history entry with the plan selection page
    // so that when the user hits the back button, they will be
    // redirected to the plan selection page instead of the email wall page
    history.replace("/plans");
  }, [history]);

  return (
    <div>
      {/* Payment page content goes here */}
    </div>
  );
};