相关疑难解决方法(0)

我正在使用Material-ui的Tabs,它们受到控制,我将它们用于(React-router)链接,如下所示:

    <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/>
    <Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/>} />
  <Tab value={2} label="data" containerElement={<Link to="/dashboard/data"/>} />

如果我当前正在访问仪表板/数据并点击浏览器的后退按钮,我会(例如)转到仪表板/用户,但突出显示的选项卡仍然停留在仪表板/数据上(值= 2)

我可以通过设置状态来改变,但是当按下浏览器的后退按钮时我不知道如何处理事件？

我发现了这个:

window.onpopstate = this.onBackButtonEvent;

但每次状态改变时都会调用此命令(不仅仅是在后退按钮事件中)

我想检测用户何时离开页面 Next JS。我统计了 3 种离开页面的方式：

1. 通过点击链接
2. 通过执行触发 router.back、router.push 等的操作...
3. 通过关闭选项卡（即当 beforeunload 事件被触发时

能够检测页面何时离开非常有用，例如，提醒用户某些更改尚未保存。

我想要这样的东西：

router.beforeLeavingPage(() => {
    // my callback
})

我使用路由next.js. 如何实现按钮返回并返回上一页？就像浏览器上的按钮一样

我正在使用 Next js Router.beforePopState 事件，我想访问我在定义此处理程序的 React 组件中创建的 useState 变量的值，示例代码如下，但每当我访问状态时，它都是空的或设置为默认值下面代码中的示例goaway状态值我总是以空字符串“”的形式在处理程序中获得，即使我在代码中设置了不同的值，有没有办法可以在处理程序中获取状态值？

const [goAway, setGoAway] = useState("");


 const browserTabcloseHandler = e => {
   e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
   // Chrome requires returnValue to be set
   e.returnValue = "";
 };

 useEffect(() => {
   if (window) {
     Router.beforePopState(() => {
       //if (componentShouldBeSavedAsDraft(componentData)) {
       const result = window.confirm("are you sure you want to leave?");
       if (!result) {
         window.history.pushState("/", "");
         Router.push("/marketplace/upload-component");
       }
       console.log(goAway); // this …