NextJS动态路由与模态重新加载导致叠加背景消失

Question

我有一个非常简单的 NextJS 应用程序，打开一个页面将更新 URL，但不会触发导航，而是在模式中显示内容。URL 仍然反映实际页面位置，任何刷新都会将用户带到那里。

当模态打开时，我仍然希望将原始内容保留在背景中褪色的页面之外，并且模态应该出现在前面。

现在，当我的模态打开时，原始背景内容会消失而不是在背景中褪色。

我已经在代码沙箱中复制了这个问题： https://codesandbox.io/s/replicating-backdrop-disappearing-rqt21?file=/pages/index.js

在代码沙盒示例中，当您单击登录按钮时，您将看到模式有效，但原始背景消失了。我怎样才能让背景内容褪色。

请帮忙。

Answer 1

正如文档中提到的，您尝试做的事情是不可能/不切实际的。您不能在加载另一个页面的同时保持一个页面的加载。如果您想保持加载相同的页面，那么您必须使用带有浅层路由的动态路由，我认为这对于静态身份验证页面来说是多余的。

相反，您应该创建一个Layout包装整个应用程序的组件（使用_app.js），或者有选择地使用可重用布局组件包装每个路由。

顺便说一句，我建议避免多次导入相同的第 3 方全局 CSS。如果您多次导入它，则表明您很可能应该使用 Next 的自定义应用程序页面来获取全局样式表（不是必需的，但应该消除多余的样式表导入）。

演示：

组件/布局/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 */

页面/_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

/* 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 */

页面/login.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>
  );
}

页面/signup.js

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