我在Next.js Github Issues中问了这个问题,但没有得到任何答案。
我从next.js/examples/app-dir-mdx复制了代码。我所做的唯一额外更改是:
- 在
app/blog/test/page.mdx
中创建新的markdown文件 - 自定义HTML锚标记
<a>
的内置组件以使用**next/link
**
在.mdx
页面中,我添加了到文件夹中其他页面之一的相对链接,如下所示:
[next page](./plain-markdown)
。
我在mdx-components.tsx
中添加了锚标记的自定义。但是在定制之后,链接没有被正确地重定向。
- 当点击
http://localhost:3001/blog/test
,我被重定向到http://localhost:3001/test
.
请注意,DOM中的URL,甚至当我将鼠标悬停在链接上时,都显示为http://localhost:3001/blog/test
但我注意到的是,在使用app目录时,锚标签href属性中的url是不同的:
- 应用程序目录之前:
<a href="/blog/plain-markdown">
- 应用程序目录后:
<a href="./plain-markdown">
请注意,这个问题是在我覆盖默认的<a>
元素以使用next/link组件时引起的。使用默认<`>元素,它工作正常
我找到了this article,它指出Next/link行为在Next 13中发生了变化。
从Next.js 13开始,<Link>
呈现为<a>
,因此尝试使用<a>
作为子元素是无效的。
1条答案
按热度按时间kuuvgm7e1#
老实说,在使用Next 13应用程序路由器时,这看起来像是
next/link
中的一个bug。<Link>
组件不能正确处理相对链接,即使在mdx之外的常规页面中使用。我只能假设NextMDX对相对链接进行了一些特殊处理,当您指定自定义链接组件时,它会中断。与此同时,我想出了以下解决方案。
希望这能帮上忙。