проблема с библиотекойact-quill со следующим проектом. js - PullRequest
Новая
       40

проблема с библиотекойact-quill со следующим проектом. js

1 голос
/ 02 апреля 2020

У меня странная проблема. Я использую Next JS для его рендеринга на стороне сервера, и я использую ReactQuill в качестве редактора форматированного текста. Чтобы обойти ReactQuill t ie в 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, но оно просто останавливается.

image1

image2

Но если я вручную нажму http://localhost:3000/admin/crud/blog, то это go на странице желаний и будет отлично работать.

image3

image4

И как только я вручную загружаю эту страницу, то Create Blog работает , Теперь я действительно не понимаю, в чем проблема? Потому что он не показывает ошибок, поэтому у меня нет термина для описания моей проблемы, поэтому я даю весь неприятный код и каталоги, которые, как я подозреваю, являются причиной этой ошибки.

1 Ответ

1 голос
/ 04 апреля 2020

Трудно дать вам какое-либо решение, не видя весь проект (как вы упомянули, не показывает ошибку ). Вы можете удалить плагин @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} />;
}

В конце концов, вы также можете импортировать свой пользовательский глобал css и здесь.

Если проблема не устранена, предоставьте ваш git репозиторий. счастливое кодирование ✌️

...