客户端路由（使用react-router）和服务器端路由

Question

我想到的是：

• 路线是如何解释的？例如，从主页(/Home)到帖子页(/Posts)
的请求
• 路由在服务器端还是客户端？
• 它如何知道它是如何处理的？

Answer 1

注意，这个答案涵盖了React Router 0.13.x版本--即将发布的1.0版本看起来将有明显不同的实现细节

这是带有react-router的最小server.js:

var express = require('express')
var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

var app = express()

// ...express config...

app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes})
  router.run(function(Handler, state) {
    var html = React.renderToString(<Handler/>)
    return res.render('react_page', {html: html})
  })
})

其中routes模块导出一个路由列表：

var React = require('react')
var {DefaultRoute, NotFoundRoute, Route} = require('react-router')

module.exports = [
  <Route path="/" handler={require('./components/App')}>
    {/* ... */}
  </Route>
]

var React = require('react')
var Router = require('react-router')

var routes = require('./routes')

Router.run(routes, Router.HistoryLocation, function(Handler, state) {
  React.render(<Handler/>, document.body)
})

在本例中，我们使用HistoryLocation，它使用HistoryAPI来确保在单击后退/前进按钮时发生正确的事情。还有一个hashlocation，它更改URLhash以生成历史记录条目，并监听window.onhashchange事件以触发导航。

当您使用React-Router的 组件时，您将为它提供一个to道具，即路由的名称，加上路由所需的任何params和query数据。此组件呈现的有一个onclick处理程序，该处理程序最终使用您提供的链接道具调用路由器实例的router.transitionto()，如下所示：

  /**
   * Transitions to the URL specified in the arguments by pushing
   * a new URL onto the history stack.
   */
  transitionTo: function (to, params, query) {
    var path = this.makePath(to, params, query);

    if (pendingTransition) {
      // Replace so pending location does not stay in history.
      location.replace(path);
    } else {
      location.push(path);
    }
  },

对于常规链接，无论您使用哪种位置类型，它最终都会调用Location.push()，这将处理设置历史记录的细节，因此使用后退和前进按钮进行导航将起作用，然后调用router.handlelocationchange()，让路由器知道它可以继续转换到新的URL路径。

然后，路由器使用新URL调用自己的router.dispatch()方法，该方法处理确定哪些配置的路由与URL匹配的细节，然后调用匹配路由的所有转换钩子。您可以在任何路由处理程序上实现这些转换挂钩，以便在即将离开或导航到路由时采取某些操作，如果事情不合您的喜好，您可以中止转换。

如果转换没有中止，最后一步是使用顶级处理程序组件和一个包含URL和匹配路由的所有细节的状态对象调用您给router.run()的回调。顶层处理程序组件实际上是router实例本身，它处理呈现匹配的最顶层路由处理程序。

每次导航到客户端上的新URL时，都会重新运行上述过程。

null