NextJs <Link> 不会重新运行脚本

Question

当我在 NextJs 中使用 <Link> 标记在页面之间导航时，它不会在更改页面后重新运行我的脚本。它仅在第一页加载后或我按重新加载时运行脚本。当使用普通的<a> 标签时，它可以正常工作，因为每次导航后页面都会重新加载。据我所知，这是因为<Link> 标签使它成为单页应用程序，并且在页面之间导航时不会刷新页面。

无论如何，我将非常感谢它在页面之间导航时重新运行脚本，或者让它刷新页面而不使用简单的<a> 标签并丢失单页应用程序功能。

此代码不会刷新页面

 <Link href="/page1">
   <a>Page 1</a>
 </Link>
 <Link href="/page2">
   <a>Page 2 </a>
 </Link>

此代码确实刷新页面

 <a href="/page1">Page 1</a>
 <a href="/page2">Page 2 </a>

我使用脚本组件加载所有脚本

export default const MyScripts = () => {
    
    return (
        <Script
            strategy="afterInteractive"
            type="module"
            src="/scripts/myScript.js"
            onReady={() => {
                console.log("Ready")
            }}
        /> 
    )
}

我注意到的一件事是，上述onReady 函数在我每次更改页面时都会触发。也许有人知道如何从onReady 运行myScript.js。

Answer 1

可以尝试使用来自useRouter 钩子的router 对象。下面是你如何做到这一点：

export const YourComponent = () => {
  const router = useRouter();
  ...
  return (<>
    <button onClick={() => router.push({ pathname: '/page1' })}/>...</button>
    // Or you can also use a div if you don't want it behaving like a button
    <div onClick={() => router.push({ pathname: '/page1' })}/>...
  ...

如果这不起作用，那么我会检查Scripts 组件的代码在做什么以及它对状态的反应。

让我知道这是否有帮助！

Answer 2

我曾经this 来解决它。每次 URL 更改时，它都会重新运行您希望重新运行的内容。

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
       // YOUR CUSTOM HOOK / FUNCTION
       console.log('I am called from pushStateHook');
       return pushState.apply(history, arguments);
    };
})(window.history);

我在 myScript.js 中的实现

function urlChange (history){
let pushState = history.pushState;
history.pushState = function(state) {
    myFunctions();//I entered my code here
    return pushState.apply(history, arguments);
};
}(window.history);
urlChange(history); //pretty sure this is what runs each time the url changes