javascript - NextJS 动态路由与模态重新加载导致覆盖背景消失

Question

我有一个非常简单的 NextJS 应用程序，其中打开页面会更新 URL，但不会触发导航，而是会在模式中显示内容。 URL 仍然反射(reflect)实际页面位置，并且任何刷新都会将用户带到那里。
当模态打开时，我希望仍然保持原始内容离开页面淡入背景，并且模态应该出现在前面。
现在，当我的模式打开时，原始背景内容消失而不是在背景中消失。
我已经在代码沙箱中复制了这个问题:https://codesandbox.io/s/replicating-backdrop-disappearing-rqt21?file=/pages/index.js在代码沙盒示例中，当您单击登录按钮时，您将看到模式正常工作，但原始背景消失了。我怎样才能让背景内容褪色。
请帮忙。

Answer 1

如 the documentation 中所述，您尝试做的事情是不可能的/不切实际的。您不能在加载另一个页面的同时保持页面加载。如果您想保持加载相同的页面，那么您必须使用 dynamic routes与 shallow routing ，我觉得这对于静态身份验证页面来说太过分了。
相反，您应该创建一个 Layout包裹整个应用程序的组件(使用 _app.js )或使用可重用的布局组件选择性地包裹每个路由。
附带说明一下，我建议避免多次导入相同的第 3 方全局 CSS。如果您多次导入它，这表明您很可能应该使用 Next 的自定义应用程序页面 global stylesheets。 (不是必需的，但应该消除多余的样式表导入)。
演示:


组件/布局/index.jsx

/* eslint-disable jsx-a11y/anchor-is-valid */
import Link from "next/link";

export default function Layout({ children }) {
  return (
    <>
      <Link href="/">
        <a className="link">Home</a>
      </Link>
      <Link href="/login">
        <a className="link">Login</a>
      </Link>
      <Link href="/signup">
        <a className="link">Signup</a>
      </Link>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque eos id
        agere, ut a se dolores, morbos, debilitates repellant. Duo Reges:
        constructio interrete. Qualis ista philosophia est, quae non interitum
        afferat pravitatis, sed sit contenta mediocritate vitiorum? Vide ne ista
        sint Manliana vestra aut maiora etiam, si imperes quod facere non
        possim. <i>Quid censes in Latino fore?</i> Ita relinquet duas, de quibus
        etiam atque etiam consideret. <i>Quippe: habes enim a rhetoribus;</i>{" "}
        <b>Sum praesertim illa perdiscere ludus esset.</b>{" "}
      </p>
      {children}
    </>
  );
}

/* eslint-enable jsx-a11y/anchor-is-valid */

pages/_app.js

import "react-responsive-modal/styles.css";
import Layout from "../components/Layout";
import "../styles.css";

export default function App({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

页面/index.js

export default function IndexPage() {
  return <h1>Index Page</h1>;
}

页面/login.js

import Router from "next/router";
import { Modal } from "react-responsive-modal";

export default function Login() {
  return (
    <Modal center blockScroll open onClose={() => Router.push("/")}>
      <p>Login</p>
    </Modal>
  );
}

页面/signup.js

import Router from "next/router";
import { Modal } from "react-responsive-modal";

export default function SignupPage() {
  return (
    <Modal center blockScroll open onClose={() => Router.push("/")}>
      <p>Signup</p>
    </Modal>
  );
}