express - 在同构的reactjs中检测移动设备

Question

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

更新

// 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')
);

顺便说一句，使用这种方法，我们还可以将身份验证 cookie 传递给路由，以便在路由落后于登录时 onEnter 方法可以重定向。

希望这有帮助!顺便说一句，React-Router 是最好的!我在纽约见到了创作者，他们是一流的。