在同构 reactjs 中检测移动设备

Question

我应该如何在我的 reactjs + express 中实现检测手机？我使用mobile-detect 来确定是否移动，但首先我使用const md = new MobileDetect(window.navigator.userAgent) 实现它，但我记得window 在服务器加载时不存在。 express 部分中的示例应该可以工作，因为这是我唯一可以访问req 的地方，但是我如何将它传递到我的反应应用程序中以供以后使用？

更新

// 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) => {
  // routes is our object of React routes defined above
  match({ routes, location: req.url }, (err, redirectLocation, props) => {
  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', () => {
  console.log('Listening on ' + port);
});

// client-render.js
import { routes } from './routes';
import { Router, browserHistory } from 'react-router'

ReactDOM.render(
  <Provider store={store}>
    <Router onUpdate={() => {scrollTop(); handleNotifs(store)}} routes={routes} history={browserHistory} />
  </Provider>,
  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'
  }, {...}]
}

Answer 1

通过使我的路由模块成为一个接受用户代理的函数，我完全完成了您的要求。然后它只返回一个数组或嵌套路由。这是一个例子......

routes.js

module.exports = (userAgent) => {
  const md = new MobileDetect(userAgent)
  if (md) { // not sure on the syntax of MobileDetect?
    return {
      // return mobile routes
    }
  } else {
    return {
      // return desktop routes
    }
  }
} 

app.js

app.get('*', (req, res) => {
  match({ routes: routes(req.headers['user-agent']), location: req.url }, (err, redirectLocation, props) => {
    // continue as normal
  }
}

client-render.js

ReactDOM.render(
  <Provider store={store}>
    <Router onUpdate={() => {scrollTop(); handleNotifs(store)}} history={browserHistory}>
      {routes(navigator.userAgent)}
    </Router>
  </Provider>,
  document.getElementById('app')
);

附带说明一下，使用这种方法，我们还可以将 auth cookie 传递给路由，因此如果路由落后于登录，onEnter 方法可以重定向。

希望这会有所帮助！ BTW React-Router 是最好的！！我在纽约见到了创作者，他们是一流的。