title: Use same instance of socket across React application
body: <p>The goal is to initiate a socket connection in App.js on app start and then make this exact socket instance available to other components that are loaded with Router. Online research suggests passing socket to a nested component as follows:</p>
  
  <pre><code>const socket = io();
  ...
  render() {
  return(&lt;div className="App"&gt;&lt;NestedComponent socket={socket} /&gt;&lt;/div&gt;)
  }
  </code></pre>
  
  <p>This does not work if socket is passed via Router</p>
  
  <pre><code>&lt;Route path='/somepath' socket={socket} component={SomeComponent}/&gt;
  </code></pre>
  
  <p>If I attempt using socket in SomeComponent (e.g.: <code>this.props.socket.emit('hi', {})</code>), this breaks app as socket turns out to be undefined in SomeComponent.</p>
  
  <p>I was not able to look up a working solution to either pass same instance of a socket with a Router, or use Redux to make socket part of the app state and provide it to lower level components.</p>
  
  <p>Any input on this is much appreciated.</p>