路线更改时高级组件卸载

Question

我正在尝试向我的网站添加一个 websocket 以进行实时通知和消息传递。我认为导航栏是一个放置它的可靠位置，因为用户总是安装导航栏。.. 不幸的是，我注意到导航栏在路线更改时始终安装和卸载。我想这是因为我没有嵌套路线或类似的东西，因为我在设置它时有点懒，而且当时看起来更容易。美好的！很恼火，我想......让我们通过创建一个新文件 WebSocketContext.jsx 并将其导入 main 来制作最终的高级组件，然后，routerProvider 将成为 WebSocketProvider 的子级，这肯定会起作用。不，我很困惑为什么我的 websocket 组件不断卸载，请帮忙！

WebSocketContext.jsx：

import React, { createContext, useContext, useRef, useEffect } from 'react';
import { io } from 'socket.io-client';

const WebSocketContext = createContext();

export const WebSocketProvider = ({ children }) => {
  const socketRef = useRef(null);
  const websocketServer = import.meta.env.VITE_API_WSS_URL + '/notifications'

  useEffect(() => {
    if (!socketRef.current) {
      socketRef.current = io(websocketServer, { transports : ['websocket'] });
      console.log('WebSocket connected');
    }
  }, []);

  return (
    <WebSocketContext.Provider value={socketRef.current}>
      {children}
    </WebSocketContext.Provider>
  );
};

export const useWebSocket = () => useContext(WebSocketContext);

Main.jsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { WebSocketProvider } from './WebSocketContext';

//component imports


const router = createBrowserRouter([
//buncha routes!
]);

ReactDOM.createRoot(document.getElementById('root')).render(
    <WebSocketProvider>
      <RouterProvider router={router} />
    </WebSocketProvider>
)

我曾经在这里启用过 React Strict 模式，但我认为这可能是问题所在，因此将其关闭。没有帮助。我还通过控制台记录了 useEffect，它确实每次都会关闭。我不知道这是否重要，但我也使用“location.href = newRoute”来重新路由。这很烦人，任何见解都会有所帮助，谢谢！

Answer 1

您面临的问题可能与使用 location.href 有关，它会触发新页面加载并导致您的应用程序完全重新渲染。我建议使用 React-router-dom 的

<Link>

和

<NavLink>

组件在应用程序中进行导航。