在React中，如何检测用户点击浏览器后退按钮的页面路径？

Question

用户目前在

A/B/C

。他们单击浏览器的后退按钮以转到

A/B

。我如何检测他们的用户来自

A/B/C

？

Answer 1

在 React 中，您可以使用

useEffect

钩子来监听浏览器历史记录的变化，并检测用户何时单击后退按钮。

要获取上一页的路径，可以使用

window.location.pathname

事件监听器中的

popstate

属性。这是一个例子：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const handleBackButton = () => {
      const previousPath = window.location.pathname;
      console.log(previousPath);
      // Do something with previousPath
    };

    window.addEventListener('popstate', handleBackButton);

    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, []);

  return (
    // Your component code
  );
}

在此示例中，

handleBackButton

是当用户单击后退按钮时将调用的函数。在这个函数里面，

window.location.pathname

用来获取上一页的路径

useEffect

钩子用于添加和删除

popstate

事件侦听器。空数组

[]

作为第二个参数传递给

useEffect

确保效果仅在组件安装时运行一次。

Answer 2

dangerouslyGetParent

- 返回父导航器的函数。 这将为您提供所有屏幕的列表

this.props.navigation.dangerouslyGetParent().state.routes 

https://reactnavigation.org/docs/2.x/navigation-prop/