1

我遇到了一个奇怪的问题。我将 NextJS 用于其服务器端渲染功能，并将 ReactQuill 用作我的富文本编辑器。为了绕过 ReactQuill 与 DOM 的联系，我动态地导入了它。但是，这带来了另一个问题，即当我尝试访问通过锚链接导入 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>

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

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


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

图像1

图2

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

图3

图4

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

4

2 回答 2

1

如果没有看到整个项目，很难给你任何解决方案（正如你提到的它没有显示错误）。您可以删除该@zeit/next-css插件，因为 Next.js 9.3 是对全局样式表的内置 Sass 支持。您也可以将它用于 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} />;
}

如果它给出任何错误，那么您可以创建一个目录/文件来复制粘贴该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 存储库。快乐编码✌️

于 2020-04-04T18:13:37.647 回答
0

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

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

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

顺便说一句，我对你的 Nextjs 课程也有同样的问题。;)

于 2020-11-02T22:59:58.147 回答