Client de Routage (à l'aide de réagir-routeur) et Côté Serveur de Routage

Remarque, cette réponse couvre Réagir Routeur version de 0,13.x - la prochaine version 1.0 sera significativement différents détails de mise en œuvre

Serveur

C'est un minimum server.js avec réagissent-routeur:

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

Où la routes module d'exporter une liste d'Itinéraires:

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

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

Chaque fois qu'une demande est faite au serveur, vous créez un usage unique Router instance configuré avec l'URL entrante que son emplacement statique, qui est résolu à l'encontre de l'arbre de routes à mis en place des itinéraires correspondant, de retour d'appel avec le haut-niveau gestionnaire d'itinéraire à être rendue et un enregistrement des enfants routes appariés à chaque niveau. C'est ce qui est consulté lorsque vous utilisez le <RouteHandler> composant au sein d'un itinéraire composant de traitement pour rendre un enfant dont l'itinéraire a été trouvée.

Si l'utilisateur a JavaScript désactivé, soit il est lent à charger, des liens qu'ils cliquez sur va frapper de nouveau le serveur, qui est résolu à nouveau comme ci-dessus.

Client

C'est un minimum client.js avec réagissent-routeur (ré-utiliser les mêmes voies module):

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

Lorsque vous appelez Router.run(), il crée un Routeur exemple pour vous dans les coulisses, qui est utilisé chaque fois que vous naviguez autour de l'application, l'URL peut être dynamique sur le client, plutôt que sur le serveur où une seule demande a une correction de l'URL.

Dans ce cas, nous utilisons la HistoryLocation, qui utilise le Histoire API pour s'assurer de la bonne chose qui se passe lorsque vous appuyez sur l'arrière/vers l'avant le bouton. Il y a aussi un HashLocation qui modifie l'URL hash pour faire les entrées de l'historique et à l'écoute de la window.onhashchange de l'événement pour lancer la navigation.

Lorsque vous utilisez réagir-routeur <Link> composant, vous lui donnez un to prop qui est le nom d'une route, en plus de toute params et query données de l'itinéraire besoins. Le <a> rendus par ce composant a un onClick gestionnaire qui a finalement appels router.transitionTo() sur le routeur de l'instance avec les accessoires que vous avez donné le lien, qui ressemble à ceci:

  /**
   * 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);
    }
  },

Pour un lien régulier en fin de compte, les appels location.push() quel que soit le type d'Emplacement que vous utilisez, qui gère les détails de la configuration de l'histoire de la navigation avec les boutons précédent et suivant de travail, puis appelle de nouveau à router.handleLocationChange() de laisser le routeur sais qu'il peut procéder à la transition vers le nouveau chemin d'accès d'URL.

Le routeur appelle ensuite sa propre router.dispatch() méthode avec la nouvelle adresse, qui gère les détails de la détermination de la configuration des itinéraires correspond à l'URL, puis appelle tout transition crochets présent pour les paires de routes. Vous pouvez mettre en œuvre ces de transition crochets sur l'un de votre itinéraire gestionnaires de prendre des mesures lorsqu'un itinéraire est sur le point d'être navigué loin d'ou navigué, avec la capacité d'interrompre la transition si les choses ne sont pas à votre goût.

Si la transition n'était pas interrompue, la dernière étape consiste à appeler la fonction de rappel que vous avez donné à Router.run() avec le haut-gestionnaire de niveau composant et un objet d'état de tous les détails de l'URL et les itinéraires correspondant. Le haut-gestionnaire de niveau composant est en fait la Router instance elle-même, qui gère le rendu le plus haut gestionnaire d'itinéraire qui correspond.

Le processus ci-dessus est de nouveau exécutée à chaque fois que vous accédez à une nouvelle URL sur le client.

Exemple des projets

• Réagir Routeur Mega Démo
• Isomorphe Laboratoire