Serving-routes avec réagiront express

Question

J'utilise réagir-routeur-dom composants et charge sur Rotes comme ceci:

<Switch> 
     <Route exact path="/home" component={Home} /> 
     <Route path="/services" component={Services} /> 
     ...and so on... 
     <Route component={PageNotFound} /> 
    </Switch> 

-je construire ce projet avec webpack et ont seulement 1 bundle.js de fichier. et l'utiliser comme fichiers statiques dans mes server.js

import express from 'express' 
const app = express() 
app.use('/', express.static('./public')) 
app.listen(3000) 

Eveything fonctionne bien jusqu'à ce que je commence à essayer de faire quelque chose sur certains de mes itinéraires:

app.get('/services',() => { 
    console.log('services') 
}) 

Quand je suis sur la route «/services 'il ne consigne pas les' services 'dans la console.

Answer 1

Vous devez comprendre la différence entre le navigateur rendant la route et Express rendant un chemin. Ce sont deux choses complètement différentes. Lorsque vous actualisez le navigateur, Express ne sait pas comment gérer "/ services", vous obtenez donc une erreur. Lorsque vous tapez "/ api/services" alors Express sait comment gérer le chemin. Lorsque React/React-Router est entièrement chargé dans le navigateur, il ne demande pas "/ services" du serveur Express, le navigateur connaît déjà le routeur et restitue le code HTML.

Vous avez besoin d'une correspondance générique "*" qui rendra le fichier par défaut/index.html. Cela permettra à votre navigateur de localiser la page "/ services". C'est compliqué mais fondamentalement, votre navigateur appelle "/ services", ceci frappe exprès, qui essaye de trouver une correspondance de chemin. Si vous avez un caractère générique qui pointe vers votre page index.html, cela est renvoyé au navigateur. Le navigateur regarde ensuite la route "/ services" et la transmet à React Router, qui charge ensuite les composants de services. Vous renvoyez toujours le même HTML (index/défaut), c'est le navigateur qui fait la magie d'afficher la bonne page. c'est pourquoi il est important d'avoir des chemins/routes différents (Chemin: "/ api/services", route: "/ services")

Si vous n'avez pas encore actualisé la page sur la route "/ services" frapperait express et obtenir le "/ services" chemin

chemin. une correspondance de motif express pour l'URL d'un bloc de code "/ api/services"

route: une URL ReactRouter pour le rendu d'un composant donné

Answer 2

Assurez-vous que votre route principale est différente sinon cela devient confus.

app.get('/api/services',() => { 
    console.log('services') 
}) 

De cette façon, nous savons que:

/services = Votre composant React-routeur

/api/services = un appel API au back-end