小编JJ7*_*J77的帖子

我在 next.js 13 项目中使用 shadcn。我想要一个带有编辑或删除条目选项的下拉菜单。当用户单击“删除”时，应弹出一个对话框并要求他们确认。但是，该对话框仅显示约 0.5 秒，然后与下拉菜单一起关闭。我怎样才能防止这种情况发生？

这是codesandbox 上的示例：Codesandbox

这是代码：

    <DropdownMenu>
      <DropdownMenuTrigger>
        <p>Trigger</p>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <Dialog>
          <DropdownMenuLabel>Edit Entry</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={() => conosle.log("Navigate to edit page")}
          >
            Edit
          </DropdownMenuItem>
          <DialogTrigger>
            <DropdownMenuItem>Delete</DropdownMenuItem>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Are you sure?</DialogTitle>
              <DialogDescription>
                Do you want to delete the entry? Deleting this entry cannot be
                undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline">Cancel</Button>
              </DialogClose>
              <Button>Delete</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </DropdownMenuContent>
    </DropdownMenu>

我已经设置了 next-auth（在带有应用程序路由器的 next.js 13 项目中），它正在工作。现在我想向我的应用程序添加国际化，如 next.js 文档中所述。但是，我不知道如何将两者结合起来。

用于下一个身份验证的中间件

/user/ 中的每条路由都应该受到保护。

export { default } from "next-auth/middleware"
export const config = { matcher: ["/(user/.*)"] }

用于 next-auth 和 i18n 的中间件

这就是我到目前为止所想到的。I18n 似乎可以工作，但路由 /user/... 不受保护。

import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'
import { NextResponse } from 'next/server'

export { default } from "next-auth/middleware"

let locales = ['en', 'de']
let defaultLocale = 'en'

function getLocale(request) {
    let headers = { 'accept-language': 'en' }
    let languages = new Negotiator({ headers …

我尝试使用 +page.js 文件中的 load() 函数来获取数据，该函数在页面初始加载后工作正常。但是，如果我刷新页面（或更改代码并自动刷新），则会出现错误：“500 内部错误”。

我可以导航到页面上的另一条路线，然后返回此页面，它会再次工作。

+页面.js：

export async function load() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const books = await res.json();

    return {
        books
    }
}

+页面.svelte：

<script>
    export let data
    let id = parseInt(new URLSearchParams(window.location.search).get('id')) - 1
</script>

<h2>{data.books[id].title}</h2>
<p>{data.books[id].body}</p>

我究竟做错了什么？