我如何在React中的每个路由上运行一些代码，除了一个特定的路由?

Question

我需要附加一个外部脚本，应该在每个页面/路由上运行，除了2。

我有一个导航栏组件，它会为每条路由渲染。因此，我在该组件中添加了一个脚本标签。这样的:

useEffect(() => {
if(location.pathname !== "/page/sehat-a-z" || location.pathname !== "/page/sehat-a-z" ) {
appendScript("url")
window.wa_btnSetting = {"btnColor":"#16BE45","ctaText":"WhatsApp Us","cornerRadius":40,"marginBottom":20,"marginLeft":20,"marginRight":20,"btnPosition":"right","whatsAppNumber":"[phone]","welcomeMessage":"Hello","zIndex":999999,"btnColorScheme":"light"};
window.onload = () => {
_waEmbed(wa_btnSetting);
};
}
}, [])

,

if(location.pathname !== "/page/sehat-a-z" || location.pathname !== "/page/sehat-a-z" )

是我不想附加脚本的页面的url。但是，它不能正常工作。当我转到这个页面时，脚本不会运行，但是当我从这个页面导航到其他页面时，脚本也不会在那里运行。

Answer 1

您使用的window.onLoad可能不会在每个路由上运行。当您刷新页面时，它必须正在运行。

同时你正在运行useEffect没有依赖项数组。因此，如果你的应用是SPA，那么你的导航条应该只加载一次，因此不运行你的脚本。

要让它工作，添加一个依赖项，它是应用程序的路由，当它改变时触发useEffect，在里面你可以查找要在哪个路由上运行。

const route = window.location.pathname
useEffect(() => {
// Your code goes here
}, [route])