如何将单个 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&nbsp;variant="outlined"&nbsp;onClick={this.timelapse}&nbsp;href="/timelapse/running">Start</Button>我不得不使用：<Button&nbsp;variant="outlined"&nbsp;onClick={this.timelapse}&nbsp;component={&nbsp;Link&nbsp;}&nbsp;to="/timelapse/running">Start</Button>希望这可以作为遇到相同问题的人的解决方案。