时间戳

首页 > 解决方案 > 在 React / Next js 中路由之前检查更改

javascript - 在 React / Next js 中路由之前检查更改

问题描述

我有一个 Next JS 应用程序，其中有非常简单的两个页面。

->主页

import Header from "../components/header";

const handleForm = () => {
  console.log("trigger");
};

export default () => (
  <>
    <Header />
    <h1>Home</h1>
    <form onSubmit={handleForm}>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
      <button type="submit"> Login </button>
    </form>
  </>
);

->关于页面

import Header from "../components/header";
export default () => (
  <>
    <Header />
    <h1>About us</h1>
  </>
);

要求：

-> 主页有一个登录表单

-> 如果用户在没有提交表单的情况下开始输入任何字段，如果他尝试移动到About us页面，则需要显示类似于beforeunload_event的警告。

我不确定我们如何处理它，因为我是新手。如果用户在编辑表单字段时尝试导航到其他 url，请帮助我处理警报。

编辑 react-spring-nextjs-routes（分叉）

标签： javascriptreactjsroutesnext.js

解决方案

据我了解，您可以通过监听事件来实现您的目标，routeChangeStart然后在拒绝移动目标网址的情况下引发异常。

我在代码框上分叉并根据您的想法创建了一个简单的演示，它不允许在用户名有价值的情况下切换页面（表单很脏）。

这是一般的想法：

import router from "next/router";

export default () => {
  // Assume this value holds the status of your form
  const [dirty, setDirty] = React.useState();

  // We need to ref to it then we can access to it properly in callback properly
  const ref = React.useRef(dirty);
  ref.current = dirty;

  React.useEffect(() => {
    // We listen to this event to determine whether to redirect or not
    router.events.on("routeChangeStart", handleRouteChange);

    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, []);

  const handleRouteChange = (url) => {
    console.log("App is changing to: ", url, ref.current);
    
    // In this case we don't allow to go target path like this
    // we can show modal to tell user here as well
    if (ref.current) {
      throw Error("stop redirect since form is dirty");
    }
  };

  return (
    // ...
  )

}

链接代码框在这里https://codesandbox.io/s/react-spring-nextjs-routes-forked-sq7uj

推荐阅读