javascript 在Next.js中有没有一种方法可以通过编程替换< a>嵌套组件中的所有标记,从而避免整个页面的重载?

3okqufwl  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(107)

我们必须使用客户端的React组件库,它提供了各种布局组件,包括页眉/页脚和导航菜单。在这些组件中,只能传递导航项的href字符串值,而不能传递ReactNode或任何允许渲染操作的内容。
在设置NextJS路由时,我们注意到使用这些导航菜单调用的页面会导致整个应用程序重新挂载;甚至_app.tsx内部的东西(应该跨路由保持挂载)也被重新初始化。
我的搜索导致我这个堆栈溢出answer谈论<a href="">如何直接设置,而不使用Link从NextJS路由器包导致此行为:这正是我们的项目正在发生的事情我通过并行渲染一个基于附加的导航进行了验证,这使得一切都能正常工作。
由于我们无法访问库源代码,请求更改可能需要一段时间(如果他们愿意的话...),我的问题是:有没有办法从外部操作这些组件,用<Link>组件替换<a>的所有示例?
或者(可能性更大),是否有办法识别/捕获NextJS应用程序中所有并非源自<Link>组件的<a href="">调用,然后在路由器中手动触发捕获的路由更改,使其表现得好像<Link>被单击了一样?
或者其他解决问题的办法?
(We我们是第一次使用NextJS,到目前为止我们只使用了React本身,所以我们对NextJS内部的东西了解还是有限的)

dgsult0t

dgsult0t1#

由于您无法控制来自外部的a,因此可以在_app.js组件中全局覆盖它们,如下所示:

import { useRouter } from "next/router";
import { useEffect } from "react";

export default function App({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    const useNextNavigationSystem = (e) => {
      e.preventDefault();
      router.push(e.currentTarget.href);
    };

    const aLinks = document.querySelectorAll("a");
    aLinks.forEach((aLink) => {
      aLink.addEventListener("click", useNextNavigationSystem);
    });

    // clean up before the component is destroyed
    return () => {
      aLinks.forEach((aLink) => {
        aLink.removeEventListener("click", useNextNavigationSystem);
      });
    };
  }, [router]);
  return <Component {...pageProps} />;
}

相关问题