下一个/导航给出错误：导航器未定义

Question

页面在表单提交时重定向，而不转到 catch 块。但是，在后端，我收到以下错误：API 主体未执行。

\n

这是页面代码。

\n

\r\n

\r\n

"use client";\nimport { Button, TextField } from "@radix-ui/themes";\nimport SimpleMDE from "react-simplemde-editor";\nimport "easymde/dist/easymde.min.css";\nimport { useForm, Controller } from "react-hook-form";\nimport axios from "axios";\nimport { useRouter } from "next/navigation";\n\ninterface IssueInterface {\n  title: string;\n  description: string;\n}\n\nconst NewIssue = () => {\n  const router = useRouter();\n  const { register, control, handleSubmit } = useForm<IssueInterface>();\n  return (\n    <form\n      className=" max-w-xl space-y-3"\n      onSubmit={handleSubmit(async (data) => {\n        try {\n          await axios.post("/issues/new", data);\n          router.push("/issues");\n        } catch (error) {\n          console.log(error);\n        }\n      })}\n    >\n      <TextField.Root>\n        <TextField.Input placeholder="Title" {...register("title")} />\n      </TextField.Root>\n      <Controller\n        name="description"\n        control={control}\n        render={({ field }) => (\n          <SimpleMDE placeholder="Description" {...field} />\n        )}\n      />\n      <Button>Create Issue</Button>\n    </form>\n  );\n};\n\nexport default NewIssue;

\r\n

\r\n

\r\n

\n

终端上的错误

\n

\n

\xe2\xa8\xaf node_modules/codemirror/lib/codemirror.js (18:0) @ eval\n\xe2\xa8\xaf ReferenceError: 导航器未定义\nat webpack_require ( / Users/krushanumohapatra/www/others/my_next_issue_tracker /.next/server/webpack-runtime.js:33:43)\nat webpack_require (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43)\nat webpack_require ( /Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43)\nat eval (./app/issues/new/page.tsx:9:80)\nat (ssr )/./app/issues/new/page.tsx (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/app/issues/new/page.js:272:1)\nat webpack_require (/Users /krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43)\nat JSON.parse ()\nnull

\n

\n

Answer 1

import SimpleMDE from "react-simplemde-editor";您可以通过使用以下代码片段替换 SimpleMDE ( ) 的现有导入语句来修复此问题：

import dynamic from 'next/dynamic'
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), { ssr: false })

此代码更改利用 Next.js 的动态导入来确保react-simplemde-editor 组件不包含在服务器端（SSR：服务器端渲染），而仅包含在客户端。这在组件与服务器端渲染不兼容的情况下非常重要。