Nextjs应用目录:MDX链接无法与相对链接一起正常工作(& L)

d4so4syb  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(165)

我在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>作为子元素是无效的。

kuuvgm7e

kuuvgm7e1#

老实说,在使用Next 13应用程序路由器时,这看起来像是next/link中的一个bug。<Link>组件不能正确处理相对链接,即使在mdx之外的常规页面中使用。我只能假设NextMDX对相对链接进行了一些特殊处理,当您指定自定义链接组件时,它会中断。
与此同时,我想出了以下解决方案。

"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

function absolute(pathname: string, href: string) {
  if (
    href.startsWith("http://") ||
    href.startsWith("https://") ||
    href.startsWith("/")
  ) {
    return href;
  }

  const stack = pathname.split("/");
  const parts = href.split("/");
  stack.pop();

  for (let i = 0; i < parts.length; i++) {
    if (parts[i] == ".") continue;
    if (parts[i] == "..") stack.pop();
    else stack.push(parts[i]);
  }
  return stack.join("/");
}

export default function Anchor({
  href,
  children,
}: React.JSX.IntrinsicElements["a"]) {
  const pathname = usePathname();
  return href !== undefined ? (
    <Link href={absolute(pathname, href)}>{children}</Link>
  ) : null;
}

希望这能帮上忙。

相关问题