J'ai réfléchi et je suis confus avec le routage entre le client et le serveur. Supposons que j'utilise ReactJS pour le rendu côté serveur avant de renvoyer la demande au navigateur Web, et que j'utilise react-router comme routage côté client pour basculer entre les pages sans actualiser en tant que SPA.
Ce qui me vient à l'esprit est:
- Comment les itinéraires sont-ils interprétés? Par exemple, une requête de la page d'accueil (
/home
) à la page des articles (/posts
) - Où va le routage, côté serveur ou client?
- Comment sait-il comment il est traité?
javascript
reactjs
routes
react-router
url-routing
mon coeur
la source
la source
Réponses:
Notez que cette réponse couvre la version 0.13.x de React Router - la prochaine version 1.0 semble avoir des détails d'implémentation très différents
Serveur
C'est un minimum
server.js
avec react-router:Où le
routes
module exporte une liste de routes:Chaque fois qu'une demande est faite au serveur, vous créez une
Router
instance à usage unique configurée avec l'URL entrante comme emplacement statique, qui est résolue par rapport à l'arborescence des routes pour configurer les routes correspondantes appropriées, en rappelant avec le niveau supérieur gestionnaire de route à rendre et un enregistrement des routes enfants correspondant à chaque niveau. C'est ce qui est consulté lorsque vous utilisez le<RouteHandler>
composant dans un composant de gestion d'itinéraire pour rendre un itinéraire enfant qui a été mis en correspondance.Si l'utilisateur a désactivé JavaScript ou que son chargement est lent, tous les liens sur lesquels il clique atteindront à nouveau le serveur, ce qui est résolu à nouveau comme ci-dessus.
Client
C'est un minimum
client.js
avec react-router (réutiliser le même module routes):Lorsque vous appelez
Router.run()
, il crée une instance de routeur pour vous dans les coulisses, qui est réutilisée chaque fois que vous naviguez dans l'application, car l'URL peut être dynamique sur le client, par opposition au serveur où une seule demande a un URL fixe.Dans ce cas, nous utilisons le
HistoryLocation
, qui utilise l'History
API pour nous assurer que la bonne chose se passe lorsque vous appuyez sur le bouton Précédent / Suivant. Il y a aussi unHashLocation
qui change l'URLhash
pour faire des entrées d'historique et écoute l'window.onhashchange
événement pour déclencher la navigation.Lorsque vous utilisez le
<Link>
composant de react-router , vous lui donnez unto
accessoire qui est le nom d'une route, plus les donnéesparams
etquery
les besoins de la route. Le<a>
rendu par ce composant a unonClick
gestionnaire qui appelle finalementrouter.transitionTo()
l'instance de routeur avec les accessoires que vous avez donnés au lien, qui ressemble à ceci:Pour un lien régulier, cela appelle finalement
location.push()
le type d'emplacement que vous utilisez, qui gère les détails de la configuration de l'historique afin que la navigation avec les boutons Précédent et Suivant fonctionnera, puis rappelle àrouter.handleLocationChange()
pour informer le routeur qu'il peut procéder à la transition vers le nouveau chemin d'URL.Le routeur appelle ensuite sa propre
router.dispatch()
méthode avec la nouvelle URL, qui gère les détails pour déterminer laquelle des routes configurées correspond à l'URL, puis appelle tous les hooks de transition présents pour les routes correspondantes. Vous pouvez implémenter ces hooks de transition sur n'importe lequel de vos gestionnaires d'itinéraire pour prendre des mesures lorsqu'une route est sur le point d'être parcourue ou parcourue, avec la possibilité d'annuler la transition si les choses ne vous conviennent pas.Si la transition n'a pas été abandonnée, la dernière étape consiste à appeler le rappel que vous avez donné
Router.run()
avec le composant de gestionnaire de niveau supérieur et un objet d'état avec tous les détails de l'URL et les routes correspondantes. Le composant de gestionnaire de niveau supérieur est en fait l'Router
instance elle-même, qui gère le rendu du gestionnaire de route le plus haut correspondant.Le processus ci-dessus est réexécuté chaque fois que vous accédez à une nouvelle URL sur le client.
Exemples de projets
la source
var routes = require('./routes')
routes? Est-ce une liste de routes? J'ai utilisé un routeur Express mais cet exemple ici sur SO semble être le seul exemple de configuration du rendu côté serveur avec React Router, donc ce serait bien s'il s'agissait d'un exemple de code completreact-router
version plus récente. Veuillez le mettre à jour.Avec 1.0, React-Router dépend du module d' historique en tant que peerDependency. Ce module traite du routage dans le navigateur. Par défaut, React-Router utilise l'API HTML5 History (
pushState
,replaceState
), mais vous pouvez le configurer pour utiliser le routage basé sur le hachage (voir ci-dessous)La gestion de la route est maintenant effectuée dans les coulisses, et ReactRouter envoie de nouvelles props aux gestionnaires de route lorsque la route change. Le routeur a un nouveau
onUpdate
rappel de prop chaque fois qu'une route change, utile pour le suivi des pages vues ou la mise à jour de<title>
, par exemple.Client (routage HTML5)
Client (routage basé sur le hachage)
Serveur
Sur le serveur, nous pouvons utiliser
ReactRouter.match
, ceci est tiré du guide de rendu du serveurla source