锚标记导致页面刷新取消正在运行的功能

Question

我正在使用

react-router-dom

进行路由构建 React 应用程序。我的标题栏使用

<a>

标签进行内部导航。我还尝试跟踪

<a>

标签点击上的一些分析事件。

<a
  href="/what-we-do"
  onClick={() =>
    TrackGoogleAnalyticsEvent(
       "header_services_click",
       "button",
       "click"
     )
 }
>

我的分析功能是：

const TrackGoogleAnalyticsEvent = (name, category, action, label, value) => {
  // Send GA4 Event
  ReactGA.event(name, {
    category: category,
    action: action,
    label: label,
    value: value,
  });
  debugger;
};

但是，我的分析事件似乎没有被一致地记录。我认为导航导致此功能取消运行，但我不完全确定。

Answer 1

就像 @Pointy 已经说过的那样，带有

a

的

href

标签告诉浏览器加载目标 URL。但是，有一些方法可以解决它。

1. 将

   href

   设置为

   javascript:;

2. 用

   href

    设置 

   #

然后在

onClick

处理程序中，将单击事件告诉

preventDefault

，这样

a

标签将基本上停止执行其最初应该执行的操作（导航到目标 URL）

此外，您还需要使用

react-router-dom

提供的方法来正确地将您的使用导航到不同的路线。最简单的方法是使用

useNavigate

最后，你的代码应该像这样——

// Outside of render()
const navigate = useNavigate();

// Inside the `return`
<a
  href="javascript:;"
  onClick={(e) =>
    e.preventDefault();
    TrackGoogleAnalyticsEvent(
       "header_services_click",
       "button",
       "click"
    )
    navigate('/what-we-do')  // <-- navigate user to the route with react-router way
 }
> 
  What to do
</a>