如何使用react router dom v6在react js中处理浏览器的后退和前进按钮？

Question

在我的react js项目中，我使用的是react router dom v6，根据我的路由器，我将移动到路由A，然后A到B，然后B到C。从C我导航到第三方URL相同的选项卡。现在在第三方路由器中，我要移动到另外 2 个页面，然后它会自动将我重定向到路线 C。

现在，当我按下浏览器后退按钮时，它会将我带回到我想要阻止的第三方 URL，用户不应该能够在浏览器后退按钮上移回第三方 URL。

运动是这样的：

A -> B -> C -> 第三方页面 -> C

到目前为止我已经使用了这些方法，但到目前为止还没有锁定。

1. 使用

   popState

   事件监听器。

addEventListener("popstate", (event) => {});

2. 使用

   window.history.pushState

   。

   useEffect(() => {
    window.history.pushState("", "", window.history.href);
    //Other code on load of PAGE C
    }, []}

 

Answer 1

为了防止用户在按浏览器后退按钮时导航回第三方 URL，您可以利用

history

提供的

react-router-dom

对象以及

useEffect

钩子来管理导航流程。以下是实现它的方法：

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

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

  useEffect(() => {
    const handleBeforeUnload = (event) => {
      // Prevent browser from navigating back to third-party URL
      history.replace('/route-c');
    };

    // Add event listener when component mounts
    window.addEventListener('beforeunload', handleBeforeUnload);

    // Remove event listener when component unmounts
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

  return (
    // Your component C JSX
  );
};

export default ComponentC;

这种方法应该可以防止用户在访问路线 C 后按浏览器的后退按钮时导航回第三方 URL。