next.js 项目的 react-quill 库问题

Question

我运行遇到了一个奇怪的问题。我将 NextJS 用于其服务器端渲染功能，并将 ReactQuill 用作我的富文本编辑器。为了解决 ReactQuill 与 DOM 的关系，我正在动态导入它。但是，这带来了另一个问题，即当我尝试访问我通过锚 link 导入 ReactQuill 的组件时，它不起作用，但我可以通过手动点击路由来访问它。这是我的目录概述，

components/
  crud/
    BlogCreate.js
pages/
  admin/
    crud/
      blog.js
    index.js
  blogs/
    index.js

在我的pages/admin/index.js

  ...
    <li className="list-group-item">
      <Link href="/admin/crud/blog">
        <a>Create Blog</a>
      </Link>
    </li>
  ...

在我的pages/admin/crud/blog.js

import BlogCreate from "../../../components/crud/BlogCreate";
...
<div className="col-md-12">
  <BlogCreate />
</div>

在我的components/crud/BlogCreate.js

import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import "../../node_modules/react-quill/dist/quill.snow.css";
...
        <div className="form-group">
          <ReactQuill
            value={body}
            placeholder="Write something amazing..."
            onChange={handleBody}
          />
        </div>

为了在 components/crud/BlogCreate.js 中使用 import "../../node_modules/react-quill/dist/quill.snow.css" 我使用 @zeit/next-css 这是我的 next.config.js

const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  publicRuntimeConfig: {
...
  }
});

问题
当我点击 Create Blog 它应该重定向我 http://localhost:3000/admin/crud/blog 但它只是冻结。

但是，如果我手动点击 http://localhost:3000/admin/crud/blog，那么它会转到所需的页面并完美运行。

只要我手动加载该页面，Create Blog 就会工作。现在我真的不明白问题出在哪里？因为它没有显示任何错误，这就是为什么我没有任何术语来描述我的问题，这就是为什么我给出了所有我怀疑是这个错误原因的讨厌代码和目录。

Answer 1

没有看到整个项目就很难给你任何解决方案（正如你提到的它没有显示错误）。您可以删除 @zeit/next-css 插件，因为 Next.js 9.3 是 Built-in Sass Support for Global Stylesheets。您也可以将它用于 css。

创建一个 pages/_app.js 文件（如果不存在）。然后，导入 quill.snow.css 文件：

import "../../node_modules/react-quill/dist/quill.snow.css";

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

如果它给出任何错误，那么您可以创建一个 directory/file 来复制粘贴该文件中的 quill.snow.css 代码。

pages/
  _app.js
styles/
  quill_style.css

然后导入_app.js中的文件，如

import "../styles/styles_quill.css";

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

最终您也可以在此处导入您的自定义 gobal css。

如果问题仍然存在，请提供您的 git 存储库。快乐编码✌️

Answer 2

首先：删除自 next.js 版本 10 以来不再需要的 @zeit/next-css 设置。

其次：将 nex.js 更新到版本 10，然后您可以在模块上使用常规导入。

import "../../node_modules/react-quill/dist/quill.snow.css";

顺便说一句，我在你的 Nextjs 课程中遇到了同样的问题。 ;)

next.js 项目的 react-quill 库问题

problem with react-quill library with next.js project

next.js

react-quill