Примечание, этот ответ охватывает React Router версии 0.13.х -следующей версии 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 или он медленно загружается, любые ссылки, которые они нажимают on снова ударит по серверу, который будет разрешен снова, как указано выше.

клиент

это минимальный client.js С react-router (повторно используя тот же модуль маршрутов):

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, который использует History API чтобы убедиться, что правильная вещь происходит, когда вы нажмете кнопку Назад / Вперед. Есть также HashLocation который изменяет URL hash, чтобы сделать записи истории и слушает window.onhashchange событие для запуска навигации.

при использовании react-router's <Link> компонент, вы даете ему to опора, которая является названием маршрута, плюс любой params и query данные, необходимые для маршрута. Этот <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() на любом типе местоположения, который вы используете, который обрабатывает детали настройки истории, поэтому навигация с помощью кнопок назад и вперед будет работать, а затем возвращается к router.handleLocationChange() чтобы маршрутизатор знал, что он может перейти к новый URL-адрес.

маршрутизатор затем вызывает свой собственный router.dispatch() метод с новым URL, который обрабатывает детали определения, какой из настроенных маршрутов соответствует URL, а затем вызывает любой переход крючки присутствует для совпадающих маршрутов. Вы можете реализовать эти переходные крючки на любом из ваших обработчиков маршрута, чтобы предпринять некоторые действия, когда маршрут собирается перейти от или перейти к, с возможностью прервать переход, если вещи не к вашему симпатия.

если переход не был прерван, последним шагом является вызов обратного вызова, который вы дали Router.run() С компонентом обработчика верхнего уровня и объектом состояния со всеми деталями URL и сопоставленных маршрутов. Компонент обработчика верхнего уровня на самом деле является Router сам экземпляр, который обрабатывает рендеринг самого верхнего обработчика маршрута, который был сопоставлен.

вышеуказанный процесс повторяется каждый раз, когда вы переходите к новому URL-адресу на клиент.

примеры проектов

• Реагировать Маршрутизатор Mega Demo
• Изоморфна Лаборатории