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

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

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

服务器

这是对

server.js

react-router 的最小要求：

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>]

每次向服务器发出请求时，您都将创建一个一次性

Router

实例，该实例将传入URL配置为其静态位置，并根据路由树进行解析，以建立适当的匹配路由，并在顶层进行回调要呈现的路由处理程序，以及在每个级别匹配哪些子路由的记录。这是

<RouteHandler>

在路由处理组件中使用该组件来呈现匹配的子路由时要进行的咨询。

如果用户关闭了Javascript或加载速度很慢，则他们单击的任何链接都将再次命中服务器，如上所述，该问题再次得到解决。

客户

这是对

client.js

react-router 的最小要求（重新使用相同的routes模块）：

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)})

调用时

Router.run()

，它会在后台为您创建一个Router实例，每次在应用程序中浏览时都会重复使用该实例，因为URL可以在客户端上动态化，而在服务器上单个请求具有动态固定网址。

在这种情况下，我们使用

HistoryLocation

，使用

History

API来确保当您按下后退/前进按钮时发生正确的事情。还有一个

HashLocation

可以更改URL的

hash

历史记录条目，并侦听

window.onhashchange

事件以触发导航。

当您使用反应路由器的

<link>

成分，你给它一个

to

道具是一个路由的名称，以及任何

params

与

query

数据路由需求。该

<a>

组件渲染的

onClick

处理程序最终会

router.transitionTo()

使用您赋予链接的props
调用路由器实例，如下所示：

    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路径。

然后，路由器

router.dispatch()

使用新的URL
调用自己的方法，该方法处理确定哪些已配置的路由与URL匹配的详细信息，然后为匹配的路由调用存在的任何转换挂钩。您可以在任何路线处理程序上实现这些过渡挂钩，以在某条路线将要离开或导航到某条路线时采取某些措施，并能够在您不喜欢的情况下中止过渡。

如果未中止转换，则最后一步是

Router.run()

使用顶级处理程序组件和状态对象调用您提供的回调，该对象具有URL的所有详细信息以及匹配的路由。顶级处理程序组件实际上是

Router

实例本身，它处理呈现匹配的最顶层路由处理程序。

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

示例项目

• React Router Mega演示
• 同构实验室