我如何在 React 中的每条路线上运行一些代码，除了特定路线？答案

【问题标题】：How do I run some code on every route in React except for a specific one?我如何在 React 中的每条路线上运行一些代码，除了特定路线？
【发布时间】：2023-01-13 15:36:15
【问题描述】：

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

我有一个为每条路线呈现的 Navbar 组件。所以，我在该组件中添加了一个脚本标签。像这样：

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":"+111111111111","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。但是，它无法正常工作。当我转到此页面时，脚本不会运行，但是当我从该页面导航到其他页面时，脚本也不会在那里运行。

【问题讨论】：

我真的不明白为什么你的 if 语句中有两次相同的路径名。 if(location.pathname !== "/page/sehat-a-z") 怎么样？
我一定是忘了在第二个路径名的末尾添加 /
任何人都可以解释拒绝投票的原因吗？

标签： javascript reactjs

【解决方案1】：

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

你也在跑步使用效果没有依赖数组。因此，如果您的应用程序是 SPA，那么您的导航栏应该只加载一次，因此不会运行您的脚本。

为了让它工作，添加一个依赖项，它是应用程序的路由，每当更改触发 useEffect 时，您可以在其中查找要运行的路由。

const route = window.location.pathname

useEffect(() => {
 // Your code goes here

}, [route])

【讨论】：

如何在依赖数组中传递路由？