Javascript Girl
  1. Javascript Girl
  3. Routing réactif fonctionne dans une machine locale mais pas Heroku
Intereting Posts
IE9 Double Form Submit Issue Obtenir l'élément suivant avec une classe spécifique après un élément spécifique Comment invoquer les méthodes JavaScript compilées par Rhino (fichiers de classe) dans le programme Java? Comment __proto__ diffère-t-il de constructor.prototype? Fonction d'exécution sur le tableau en utilisant les rappels L'initialisation du tableau Javascript simple ne fonctionne pas dans Chrome Knockout bindingHandler pour les nombres séparés par des virgules avec la même entrée à nouveau dans une zone de texte Existe-t-il un script / outil JAVADOCS similaire pour les fichiers Javascript? Un remplacement universel createPopup ()? Un objet peut-il être faux? URL du marqueur Google Map Div avec scroll et contenu avec des positions absolues Appels Ajax effectués à partir de la fonction personnalisée Google Spreadsheet Puis-je ajouter plus de sélecteurs jquery à cheerio? (Node.js) Div "contenteditable": obtenez et supprimez le mot précédent caret

Routing réactif fonctionne dans une machine locale mais pas Heroku

Réagir / réagir routeur / question heroku ici (il est probablement hérooku où il échoue).

Je suis en train de suivre ce merveilleux tutoriel: https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.y77yjte2j et tout fonctionne jusqu'au point où je publie Il à heroku et j'essaie de naviguer vers https://appname.herokuapp.com/about et j'obtiens une erreur 404 Not Found / nginx. Bien sûr, selon le tutoriel, il est censé afficher une page About.

Bottomline: React router ne fonctionne pas sur heroku et je ne peux pas comprendre pourquoi .

J'ai essayé de modifier mon fichier server/app.js comme cela a été suggéré dans ceci: Les routes de server/app.js ne fonctionnent pas dans la création de l'application create- server/app.js de facebook 

 // server/app.js const express = require('express'); const morgan = require('morgan'); const path = require('path'); const app = express(); console.log('hi from /src/server.js') // Setup logger app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms')); // Serve static assets app.use(express.static(path.resolve(__dirname, '..', 'build'))); // Always return the main index.html, so react-router render the route in the client app.get('/about', (req, res) => { console.log('hi from app.get.about') console.log(req) console.log(res) res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); }); app.get('/*', (req, res) => { console.log('hi from app.get') console.log(req) console.log(res) res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); }); module.exports = app;

Mais il ne fonctionne pas et ne logue rien dans la console: 

 2017-01-20T21:03:47.438140+00:00 heroku[web.1]: Starting process with command `bin/boot` 2017-01-20T21:03:49.540005+00:00 app[web.1]: Injecting runtime env into /app/build/static/js/main.242e967b.js (from .profile.d/inject_react_app_env.sh) 2017-01-20T21:03:49.695317+00:00 app[web.1]: Starting log redirection... 2017-01-20T21:03:49.695899+00:00 app[web.1]: Starting nginx... 2017-01-20T21:03:51.108255+00:00 heroku[web.1]: State changed from starting to up 2017-01-20T21:04:22.720627+00:00 heroku[router]: at=info method=GET path="/" host=sentieoapp1.herokuapp.com request_id=fb8bc13b-f6b5-47bc-8330-443f28e211df fwd="132.147.73.97" dyno=web.1 connect=0ms service=3ms status=200 bytes=627 2017-01-20T21:04:22.746761+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:22 +0000] "GET / HTTP/1.1" 200 386 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36" 2017-01-20T21:04:23.076521+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:23 +0000] "GET /static/js/main.242e967b.js HTTP/1.1" 200 62263 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36" 2017-01-20T21:04:23.056416+00:00 heroku[router]: at=info method=GET path="/static/js/main.242e967b.js" host=sentieoapp1.herokuapp.com request_id=436d5ce5-ee39-4ab7-9e12-f5871e0fd552 fwd="132.147.73.97" dyno=web.1 connect=0ms service=25ms status=200 bytes=62540 2017-01-20T21:04:23.745285+00:00 heroku[router]: at=info method=GET path="/static/css/main.9a0fe4f1.css" host=sentieoapp1.herokuapp.com request_id=80438aaa-58c4-456e-8df9-7a29e49bc4ba fwd="132.147.73.97" dyno=web.1 connect=0ms service=2ms status=200 bytes=560 2017-01-20T21:04:23.766676+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:23 +0000] "GET /static/css/main.9a0fe4f1.css HTTP/1.1" 200 301 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36" 2017-01-20T21:04:24.044940+00:00 heroku[router]: at=info method=GET path="/static/media/logo.5d5d9eef.svg" host=sentieoapp1.herokuapp.com request_id=bcbc1906-3b90-4f13-a700-f432f79c725d fwd="132.147.73.97" dyno=web.1 connect=0ms service=1ms status=200 bytes=2902 2017-01-20T21:04:24.065013+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:24 +0000] "GET /static/media/logo.5d5d9eef.svg HTTP/1.1" 200 2671 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36" 2017-01-20T21:04:26.264631+00:00 heroku[router]: at=info method=GET path="/about" host=sentieoapp1.herokuapp.com request_id=0caef324-9268-4ebb-a3f5-0fb047100893 fwd="132.147.73.97" dyno=web.1 connect=0ms service=4ms status=404 bytes=403 2017-01-20T21:04:26.284717+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:26 +0000] "GET /about HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"

Et c'est là que je suis bloqué. Je suis familier avec Express et je l'ai fait fonctionner sur l'heroku avant, mais ce n'est pas un niveau de cauchemar. Je comprends que ce n'est pas le routage côté serveur, mais plutôt que de faire un routage à partir d'une seule page index.html. Mais si je peux le faire fonctionner sur ma machine locale, pourquoi ne fonctionne-t-il pas sur Heroku?

J'ai récemment rencontré cette publication avant 3 heures de recherche à travers la documentation de réacteur-routeur et heroku. Pour Swyx, et quelqu'un d'autre ayant le même problème, je décris le minimum de ce que vous devez faire pour que cela fonctionne.

Router.js – (Évidemment, modifiez AppSplash et AppDemo sur vos composants) 

 export default <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={AppSplash}/> <Route path="demo" component={AppDemo}/> </Route> </Router>

App.js 

 import React, { Component } from 'react' class App extends Component { static propTypes = { children: PropTypes.node } render() { const { children } = this.props return ( <div> {children} </div> ) } } export default App

Créez un nouveau fichier dans la racine de votre répertoire personnel et nommez-le static.json . Mettez-le en place. 

 { "root": "build/", "clean_urls": false, "routes": { "/**": "index.html" } }

Appuyez de nouveau sur heroku. Les routes devraient fonctionner cette fois.

Explication:

Vous devez modifier le paquetage par défaut de Heroku, sinon le service est confondu avec la façon de gérer le routage côté client. Marco illustrdddiceAddddiceAdachachachachachachachélemmélempadice aleddeterddice aleddeterddice aledddice aledddice aledddice aled Le reste est la manière correcte de gérer le routage en fonction de la documentation «réacteur-routeur».