У меня очень простое приложение NextJS, в котором открытие страницы обновляет URL-адрес, но не запускает навигацию, а вместо этого отображает содержимое внутри модального окна. URL-адрес по-прежнему отражает фактическое расположение страницы, и любое обновление приводит пользователя туда.

Когда модальное окно открыто, я хочу, чтобы исходное содержимое страницы оставалось выцветшим на заднем плане, а модальное окно должно выходить на передний план.

Прямо сейчас, когда открывается мое модальное окно, исходное фоновое содержимое исчезает, а не исчезает в фоновом режиме.

Я воспроизвел проблему в песочнице кода: https://codesandbox.io/s/replicating-backdrop-disappearing-rqt21?file=/pages/index.js

В примере с песочницей кода, когда вы нажимаете кнопку входа в систему, вы видите, что модальное окно работает, но исходный фон исчезает. Как я могу заставить фоновое содержимое просто блекнуть.

Пожалуйста помоги.

4
breaktop 11 Фев 2021 в 01:11

2 ответа

Лучший ответ

Как упоминалось в документации, то, что вы пытаетесь сделать, невозможно. / практично. Вы не можете одновременно поддерживать загрузку страницы во время загрузки другой страницы. Если вы хотите, чтобы та же самая страница оставалась загруженной, вам придется использовать динамические маршруты с мелкой маршрутизацией, которая, на мой взгляд, является излишней для страниц статической аутентификации.

Вместо этого вы должны либо создать компонент Layout, который охватывает все приложение (используя _app.js) или выборочно оберните каждый маршрут повторно используемым компонентом макета.

Кстати, я бы рекомендовал избегать импорта одного и того же стороннего глобального CSS более одного раза. Если вы импортируете его более одного раза, это означает, что вам, скорее всего, следует использовать страницу пользовательского приложения Next для глобальные таблицы стилей (не требуется, но должен исключить избыточный импорт таблиц стилей).

Демо:

Edit NextJS Layout


компоненты / 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>
  );
}

< Сильный > страницы / 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>
  );
}
0
Matt Carlotta 15 Фев 2021 в 05:43

Как упоминалось в комментариях, вы запускаете навигацию, поскольку ваша ссылка указывает на другую страницу.

Для достижения желаемого поведения вы можете использовать параметры запроса на той же странице в сочетании с мелкой маршрутизацией .

export default function IndexPage() {
    const router = useRouter();

    return (
        <div>
            <Link href="/?login=true" as="/login" shallow={true}>
                <a>Login</a>
            </Link>
            <Modal
                center
                blockScroll={true}
                open={!!router.query.login}
                onClose={() => router.push('/', undefined, { shallow: true })}
            >
                <p>Hello World!</p>
            </Modal>
        </div>
    );
}
0
juliomalves 11 Фев 2021 в 22:23
66145858