web-dev-qa-db-fra.com

Comment router pour une application react-router en utilisant express?

J'ai donc un back-end dans ExpressJs et plusieurs routes à ce sujet. Maintenant, je viens de suivre this tutorial pour configurer un RESTful api sur express. Maintenant, je veux passer à une réaction complète sur le frontend, de manière à avoir une API exécutée dans le back-end pour extraire des éléments de la base de données et je pense à utiliser fetch de react pour obtenir ces données. J'ai vu beaucoup de gens dire que c'est la meilleure façon de le faire. Mais maintenant, il y a un problème, je ne sais pas comment procéder pour cela. J'ai la configuration react-router donc je suppose que je l'utiliserais. Mais comment puis-je servir ces fichiers côté client? Comment puis-je m'assurer que tous les itinéraires sauf _ /api servent uniquement mes fichiers js? Comme si j'avais déjà un dossier construit avec un index.html et un main<hash>.js. Je les exécute facilement, mais comment puis-je les intégrer à express? Je n'ai pas pu trouver de réponse à cela. Comment puis-je acheminer une application reactjs à l'aide de expressjs? et aussi j’ai vu un tutoriel me dire d’utiliser une route * mais cela signifie que même mes routes api ne feront que pointer vers cela.

reactjsexpressrouting
5
ICanKindOfCode

Il existe essentiellement trois méthodes pour générer le rendu d'une application: l'une est le rendu côté serveur, l'autre le rendu côté client et la troisième le rendu isomorphe.

Ainsi, si vous définissez vos itinéraires dans Nodejs et naviguez dans l'application à travers ces itinéraires, le rendu sera entièrement effectué côté serveur.

J'ai vu un tutoriel me disant d'utiliser un * itinéraire mais cela signifie même mon Les routes api ne feront que pointer vers cela. ? Comment puis-je m'assurer que tous les itinéraires sauf les routes/api ne servent que mes fichiers js?

En ce qui concerne ce que vous pouvez faire est 

server.get('/api', (req, res, next) => {
    //You can handle the request here
})  

server.get('*', (req, res, next) => {
    //You can handle the request here
})

Vous pouvez définir votre route dans cet ordre. Ainsi, tout appel de '/ api' sera traité par la première route et toutes les autres demandes seront traitées par la deuxième route.

Maintenant, je veux passer à la pleine réaction sur le frontend, de sorte que je vais avoir une API en cours d'exécution dans le backend pour obtenir des informations de la base de données et pense en utilisant chercher chercher de réagir pour obtenir ces données

Ici, vous n’avez pas besoin de ça. Ce sera un rendu côté client complètement

    server.get('*', (req, res, next) => {
        //You can handle the request here
    })

Pour cela, vous pouvez créer une application de réaction à partir de zéro ou utiliser un passe-partout ( https://github.com/facebookincubator/create-react-app ). 

Là, vous pouvez définir tout le routage et simplement appeler l'URL http://localhost/api/xxxx et obtenir les données. Vous pouvez utiliser ces données dans l'interface. Dans ce cas, il y aura un serveur Nodejs qui servira l'interface et le serveur express hébergera le serveur. service 'api' pour obtenir des données.

J'ai réagi-routeur configuré donc je suppose que je l'utiliserais. Mais comment puis-je servir ces fichiers sur le côté client?

Comment puis-je acheminer une application reactjs à l'aide de expressjs?

L’application Reactjs lorsqu’elle est compilée est une combinaison de fichiers statiques composés principalement de html, css, javascript. Si vous souhaitez que votre application soit desservie par votre serveur express.js, vous devez utiliser le rendu isomorphe. C'est de loin la meilleure approche pour le rendu des applications, car elle est bonne pour le référencement et le chargement initial rapide de pages. Cela se fait au prix d’une installation compliquée. Dans ce cas, chaque fois que la page s'actualise ou que la première demande arrive, express servira la première page (index.html) et index.html contiendra les fichiers js et css statiques (regroupés) requis pour le rendu côté client. Le premier rendu sera effectué par le serveur express et le rendu suivant par le navigateur lui-même.

1
pritesh