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

本文介绍了NextJS 动态路由与模态重新加载导致覆盖背景消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

当模态打开时，我希望仍然保持原始内容离开页面淡入背景，并且模态应该出现在最前面.

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

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

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

请帮忙.

解决方案

如

components/Layout/index.jsx

/* eslint-disable jsx-a11y/anchor-is-valid */从下一个/链接"导入链接；导出默认函数 Layout({ children }) {返回 (<><链接href="/"><a className="link">Home</a></链接><链接href="/login"><a className="link">登录</a></链接><链接href="/signup"><a className="link">注册</a></链接><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Itaque eos idagere, ut a se dolores, morbos, 使人衰弱的驱虫剂.二重奏:构建interrete.Qualis ista philosophia est, quae non interitumafferat pravitatis, sed 坐 contenta 平庸 vitiorum?视频网sint Manliana vestra aut maiora etiam, si imperes quod facere non可能.<i>拉丁裔前排的Quid Censes?</i>Ita relinquet duas, de quibusetiam atque etiam 周到.<i>Quippe: habes enim a rhetoribus;</i>{""}<b>Sum praesertim illa perdiscere ludus esset.</b>{""}</p>{孩子们}</>);}/* eslint-enable jsx-a11y/anchor-is-valid */

pages/_app.js

import "react-responsive-modal/styles.css";从../components/Layout"导入布局；导入../styles.css"；导出默认函数 App({ Component, pageProps }) {返回 (<布局><组件 {...pageProps}/></布局>);}

pages/index.js

导出默认函数 IndexPage() {返回 <h1>索引页</h1>;}

pages/login.js

从next/router"导入路由器；从react-responsive-modal"导入{ Modal }；导出默认函数登录(){返回 (<Modal center blockScroll open onClose={() =>Router.push("/")}><p>登录</p></模态>);}

pages/signup.js

从next/router"导入路由器；从react-responsive-modal"导入{ Modal }；导出默认函数 SignupPage() {返回 (<Modal center blockScroll open onClose={() =>Router.push("/")}><p>注册</p></模态>);}

I have a very simple NextJS app where opening a page will update the URL but won't trigger a navigation and will instead display the content inside a modal. The URL still reflects the actual page location and any refresh brings the user there.

When the modal open, I want to still keep the original content off the page faded in the background and the modal should come to the front.

Right now when my modal opens, the original background content disappears rather than faded in the background.

I've replicated the issue in code-sandbox : https://codesandbox.io/s/replicating-backdrop-disappearing-rqt21?file=/pages/index.js

In the code-sandbox example, when you click the login button, you will see the modal works but the original background disappears. How can I get the background content to just be faded.

Please help.

解决方案

As mentioned in the documentation, what you're attempting to do is not possible/practical. You can't simultaneously keep a page loaded while loading another page. If you want to keep the same page loaded, then you'll have to utilize dynamic routes with shallow routing, which I feel is overkill for static authentication pages.

Instead, you should either create a Layout component that wraps over the entire app (using _app.js) or selectively wrap each route with a reusable layout component.

On a side note, I'd recommend avoiding importing the same 3rd party global CSS more than once. If you're importing it more than once, it's a sign that you most likely should be using Next's custom app page for global stylesheets (not required, but should eliminate redundant stylesheet imports).

Demo:

components/Layout/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>
  );
}

pages/index.js

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

pages/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>
  );
}

pages/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>
  );
}

这篇关于NextJS 动态路由与模态重新加载导致覆盖背景消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！