Используйте один и тот же экземпляр сокета в приложении React

Question

Цель состоит в том, чтобы инициировать соединение с сокетом в App.js при запуске приложения, а затем сделать этот точный экземпляр сокета доступным для других компонентов, которые загружены с маршрутизатором.Онлайн-исследование предлагает передать сокет вложенному компоненту следующим образом:

const socket = io();
...
render() {
return(<div className="App"><NestedComponent socket={socket} /></div>)
}

Это не работает, если сокет передается через маршрутизатор

<Route path='/somepath' socket={socket} component={SomeComponent}/>

Если я пытаюсь использовать сокет в SomeComponent (например:this.props.socket.emit('hi', {})), это нарушает работу приложения, поскольку сокет оказывается неопределенным в SomeComponent.

Мне не удалось найти рабочее решение для передачи одного и того же экземпляра сокета с помощью маршрутизатора или использования Redux длясделайте сокет частью состояния приложения и предоставьте его компонентам более низкого уровня.

Любой вклад в это очень важен.

Answer 1

Вы можете использовать метод рендеринга и передавать сокет следующим образом:

<Route path='/somepath' 
  render={(props) => (<SomeComponent socket={socket} {...props} />)} />

Примечание: {...props} передается для доступа к реквизитам маршрутизатора, таким как местоположение, история, совпадение и т. Д.

В SomeComponent:

// to access socket props
this.props.socket

Итак, теперь это должно работать нормально:

this.props.socket.emit('hi', {})