web-dev-qa-db-fra.com

Jeton inattendu <erreur dans le composant de routeur de réaction

J'essaie d'écrire un composant de routeur pour mon application React. Je crée une nouvelle classe React et je définis des routes dans la méthode componentDidMount. Ceci est une méthode complète

componentDidMount: function () {

    var me = this;

    router.get('/', function(req){
        me.setState({
            component: <MainPage />
        });
    });

    router.get('/realty', function(req){
        me.setState({
            component: <RealtyPage />
        });
    });

    router.get('/realty/:id', function(req){
        me.setState({
            component: <RealtyPage id={req.params.id} />
        });
    });

},

Quand je vais dans '/' ou '/ realty', tout fonctionne. Mais, quand je vais dans le 'realty/new', j'ai une erreur Uncaught SyntaxError: Unexpected token <dans app.js: 1. Mais Chrome affiche cette erreur dans mon index.html et je ne peux même pas le déboguer dans le navigateur. Cette erreur se produit à chaque fois, lorsque je vais sur la route avec '/'. J'essaie d'utiliser d'autres routeurs côté client, comme page.js, rlite, grapnel, mais toujours les mêmes. Peut-être que quelqu'un a une idée de cette erreur?

UPD: C'est le code complet du composant routeur. Maintenant, il utilise le routage page.js fo et je vois la même erreur

var React = require('react');
var page = require('page');


var MainPage = require('../components/MainPage');
var RealtyPage = require('../components/RealtyPage');


var Router = React.createClass({

    getInitialState: function(){
        return {
            component: <RealtyPage />
        }
    },

    componentDidMount: function () {

        var me = this;

        page('/', function (ctx) {
            me.setState({
                component: <MainPage />
            });
        });

        page('/realty', function (ctx) {
            me.setState({
                component: <RealtyPage />
            });
        });

        page.start();

    },

    render: function(){
        return this.state.component
    }
});

module.exports = Router;
javascriptreactjshtml5-history
37
Sergey Troinin

L'erreur "jeton inattendu" peut apparaître pour un certain nombre de raisons différentes. J'ai rencontré un problème similaire, et dans mon cas, le problème était que la balise de script pour charger le bundle généré dans le html était comme suit:

<script src="scripts/app.js"></script>

Lorsque vous naviguez vers une route avec un paramètre (la même chose se produira pour une route imbriquée ou une route avec plusieurs segments), le navigateur essaiera de charger le script en utilisant la mauvaise URL. Dans mon cas, le chemin de l'itinéraire était 'user /: id', et le navigateur a demandé à ' http://127.0.0.1:3000/ user /scripts/app.js 'au lieu de' http://127.0.0.1:3000/scripts/app.js '. La solution était simple, changez la balise de script en ceci:

<script src="/scripts/app.js"></script>
135
Fastas

Si quelqu'un d'autre rencontre ce problème, veuillez consulter l'onglet réseau de devtools pour les réponses du serveur. La raison derrière le message d'erreur est que vous essayez de charger un fichier javascript/json et qu'un fichier html a été renvoyé (éventuellement un message d'erreur).

Les fichiers HTML commencent normalement comme ceci:

<!doctype html>
<html>
...

Le navigateur voit le premier <et est confus car ce n'est pas du JavaScript valide, donc affiche le message d'erreur:

SyntaxError: Unexpected token <

Donc, dans le cas ci-dessus, lorsque l'OP a demandé un mauvais nom de fichier, il a récupéré une page d'erreur (en HTML) qui a conduit à cette erreur.

J'espère que cela aide quelqu'un d'autre :)

1
jsdeveloper