Javascript 信号HUBR连接继续执行

嗨，我在React/typescript应用程序中配置了信号R。我正在从azure功能推送消息。我可以得到的信息，但我提出了一个问题，我无法找出它。每当我在页面之间切换时，我都会不断收到相同的消息。下面是我的实现

这是在构造函数内部

 constructor(props) {
        super(props);
        const token = getToken();
        let funappurl = globals.getGlobals('functionAppUri');
        const hubUrl = `${funappurl}/api?hubname=Enrich`;
        this.hubConnection = new signalR.HubConnectionBuilder().withUrl(hubUrl, {
            accessTokenFactory: () => {
                return token
            }
        } as signalR.IHttpConnectionOptions)
             .configureLogging(signalR.LogLevel.Information)
             .build();
         this.hubConnection.start().catch((err: string) =>
         {
             
         });
    }

下面是componentdidmount

this.hubConnection.on("Enrich", (message: any) => {
        console.log(message);
        this.notificationMessages.push(message);
        localStorage.setItem("notificationObject", JSON.stringify(this.notificationMessages));   
    });

我在上述代码中面临的问题。如果我的azure功能推送一条消息，则不会出现任何问题。但如果我在网页上单击并导航到其他页面，那么这个.hubConnection.on会执行多次，并且我会多次获得相同的数据。所以我只是想知道我们是否有办法避免这种情况。我已经挣扎了很多天，我无法理解这一点。有人能帮我一下吗。任何帮助都将不胜感激。多谢各位