客户端（HTML5路由）

Question

我一直在想，我对Client和Server之间的路由感到困惑。假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端呈现，并使用react-router作为客户端路由在页面之间切换而不刷新为SPA。

我想到的是：

如何解释路线？例如，从主页（/home）到帖子页面（/posts）的请求
路由在服务器端或客户端上的位置？
它如何知道如何处理？

Answer 1

注意，这个答案涵盖了React Router版本0.13.x - upcoming version 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>
]

每次向服务器发出请求时，您都会创建一个一次性使用Router实例，并将传入的URL配置为静态位置，该实例将根据路由树进行解析，以设置相应的匹配路由，使用要呈现的顶级路由处理程序回调，以及在每个级别匹配哪些子路由的记录。当您使用路由处理组件中的<RouteHandler>组件来呈现匹配的子路由时，这就是所咨询的。

如果用户关闭了JavaScript，或者加载速度很慢，他们点击的任何链接都会再次点击服务器，如上所述再次解决。

客户端

这是带有react-router的最小client.js（重新使用相同的路由模块）：

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()时，它会在幕后为您创建一个路由器实例，每次您在应用程序中导航时都会重复使用该实例，因为URL可以在客户端上是动态的，而不是单个请求具有固定URL的服务器。

在这种情况下，我们正在使用HistoryLocation，HashLocation使用History API来确保当您点击后退/前进按钮时正确的事情发生。还有hash更改网址<Link>以创建历史记录条目并收听window.onhashchange事件以触发导航。

当您使用react-router的to组件时，您会给它一个params道具，这是道路的名称，加上任何query和{{1}路线需要的数据。此组件呈现的<a>有一个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()，这会处理设置历史记录的详细信息，因此使用后退和前进按钮进行导航将起作用，然后回调{ {1}}让路由器知道它可以继续转换到新的URL路径。

然后，路由器使用新URL调用自己的router.handleLocationChange()方法，该URL处理确定哪些配置的路由与URL匹配的详细信息，然后调用匹配路由的任何transition hooks。您可以在任何路由处理程序上实现这些转换挂钩，以便在路由即将导航或导航到路径时执行某些操作，并且如果事情不符合您的喜好，则可以中止转换。

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

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

示例项目

Answer 2

使用1.0时，React-Router依赖于history模块作为peerDependency。该模块处理浏览器中的路由。默认情况下，React-Router使用HTML5历史记录API（pushState，replaceState），但您可以将其配置为使用基于散列的路由（请参阅下文）

路由处理现在在幕后完成，当路径发生变化时，ReactRouter会向路径处理程序发送新的道具。例如，每当路线发生变化时，路由器都会有一个新的onUpdate道具回调，对于网页浏览跟踪或更新<title>非常有用。

客户端（HTML5路由）

import {Router} from 'react-router'
import routes from './routes'

var el = document.getElementById('root')

function track(){
  // ...
}

// routes can be children
render(<Router onUpdate={track}>{routes}</Router>, el)

客户端（基于散列的路由）

import {Router} from 'react-router'
import {createHashHistory} from 'history'
import routes from './routes'

var el = document.getElementById('root')

var history = createHashHistory()

// or routes can be a prop
render(<Router routes={routes} history={history}></Router>, el)

服务器

在服务器上，我们可以使用ReactRouter.match，这取自server rendering guide

import { renderToString } from 'react-dom/server'
import { match, RoutingContext } from 'react-router'
import routes from './routes'

app.get('*', function(req, res) {
  // Note that req.url here should be the full URL path from
  // the original request, including the query string.
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } else {
      res.status(404).send('Not found')
    }
  })
})

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

2 个答案:

服务器

客户端

示例项目

客户端（HTML5路由）

客户端（基于散列的路由）

服务器