title: Detecting mobile in an isomorphic reactjs
body: <p>How should I implement detecting mobile in my reactjs + express? I used <a href="https://www.npmjs.com/package/mobile-detect" rel="nofollow">mobile-detect</a> to determine if mobile but first I implemented it with <code>const md = new MobileDetect(window.navigator.userAgent)</code> but I remembered <code>window</code> doesn't exist when it's server loaded. The example in express section should work because that's the only place I could access <code>req</code> but how do I pass it in my react app to be used afterwards?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>// app.js
  
  ...
  import { routes } from './routes';
  import { match, RouterContext } from 'react-router';
  import { renderToString } from 'react-dom/server';
  
  ...
  const app = express();
  app.use(express.static('public'));
  
  app.set('view engine', 'ejs');
  
  app.get('*', (req, res) =&gt; {
    // routes is our object of React routes defined above
    match({ routes, location: req.url }, (err, redirectLocation, props) =&gt; {
    if (err) { // something went badly wrong, so 500 with a message
      res.status(500).send(err.message);
  
    } else if (redirectLocation) { // we matched a ReactRouter redirect, so redirect from the server
      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
  
    } else if (props) { // if we got props, that means we found a valid component to render for the given route
      const reducer = combineReducers(reducers);
      const store = applyMiddleware(...middlewares)(createStore)(reducer);
  
    ...
  const server = http.createServer(app);
  const port = process.env.PORT || 3003;
  
  server.listen(port);
  server.on('listening', () =&gt; {
    console.log('Listening on ' + port);
  });
  
  // client-render.js
  import { routes } from './routes';
  import { Router, browserHistory } from 'react-router'
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router onUpdate={() =&gt; {scrollTop(); handleNotifs(store)}} routes={routes} history={browserHistory} /&gt;
    &lt;/Provider&gt;,
    document.getElementById('app')
  );
  
  // routes.js
  import AppComponent from './components/app';
  import IndexComponent from './components/index';
  ...
  
  const routes = {
    path: '',
    component: AppComponent,
    childRoutes: [{
      path: '/',
      component: IndexComponent,
      name: 'home'
    }, {...}]
  }
  </code></pre>