如何将单个 Socket IO 实例传递给具有 Context API 的页面？

Question

所以我试图在我的整个应用程序中使用一个 Socket IO 实例并从多个组件访问它。我已经搜索了很多，也尝试了很多......没有任何成功。现在我正在使用 React Context API。我正在初始化我的SocketContextin SocketProvider.js：import React from 'react'const SocketContext = React.createContext()export default SocketContext打开套接字并提供它App.js：import React from 'react';import Main from './components/Main/Main';import io from 'socket.io-client';import SocketContext from './services/SocketProvider'function App() {  const socket = io("http://localhost:8000")  return (    <div className="App">      <SocketContext.Provider value={socket}>      <MuiPickersUtilsProvider>        <MuiThemeProvider >          <Main />        </MuiThemeProvider>      </MuiPickersUtilsProvider>      </SocketContext.Provider>    </div>  );}export default App;路由Main.js：function Main() {  return (    <main>      <Switch>        <Route exact path="/" component={Menu} />        <Route path="/panorama" component={Panorama} />        <Route path="/movie" component={Movie} />        <Route          path="/timelapse"          render={({ match: { url } }) => (            <>              <Route path={`${url}/`} component={Timelapse} exact />              <Route path={`${url}/running`} render={(props) => <Running {...props} type={'timelapse'} />} />            </>          )}        />      </Switch>    </main>  );}export default Main;

Answer 1

错误是在href我的 Button 上更改 Route使用Link组件，这不会触发应用程序的完全重新加载，从而初始化一个新的 Socket IO 实例。

所以不要使用：

<Button variant="outlined" onClick={this.timelapse} href="/timelapse/running">Start</Button>

我不得不使用：

<Button variant="outlined" onClick={this.timelapse} component={ Link } to="/timelapse/running">Start</Button>

希望这可以作为遇到相同问题的人的解决方案。