web-dev-qa-db-ja.com

React Routerコンポーネントの予期しないトークン<エラー

反応アプリのルーターコンポーネントを作成しようとしています。私は新しい反応クラスを作成し、componentDidMountメソッドでいくつかのルートを定義しています。これは完全な方法です

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} />
        });
    });

},

「/」または「/ realty」に移動すると、すべて動作します。しかし、「realty/new」に移動すると、Uncaught SyntaxError：Unexpected token <in app.js：1というエラーが発生します。しかし、Chrome=デバッガーはindex.htmlでそのエラーを表示し、ブラウザーでこれをデバッグすることさえできません。 page.js、rlite、grapnelのような他のクライアント側ルーターを使用しますが、それでもすべて同じです。

UPD：これはルーターコンポーネントのフルコードです。今ではルーティングのためにpage.jsを使用していますが、同じエラーが表示されます

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

「予期しないトークン」エラーは、さまざまな理由で表示される場合があります。私は同様の問題に遭遇しましたが、私の場合、問題は生成されたバンドルをhtmlにロードするスクリプトタグが次のようなものだったことです：

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

パラメーターを使用してルートに移動する場合（ネストされたルートまたは複数のセグメントを持つルートでも同じことが起こります）、ブラウザーは間違ったURLを使用してスクリプトをロードしようとします。私の場合、ルートパスは「user /：id」で、ブラウザーは「 http://127.0.0.1:3000/user/ scripts/app.js 'の代わりに' http://127.0.0.1:3000/scripts/app.js '。解決策は簡単でした。スクリプトタグを次のように変更します。

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

他の誰かがこの問題を抱えている場合は、サーバーの応答についてdevtoolsネットワークタブを確認してください。エラーメッセージの背後にある理由は、javascript/jsonファイルをロードしようとしており、htmlファイルが返されたためです（おそらくエラーメッセージ）。

HTMLファイルは通常、次のように始まります。

<!doctype html>
<html>
...

ブラウザは最初の<を見て混乱します。これは有効なJavaScriptではないため、エラーメッセージが出力されるためです。

SyntaxError: Unexpected token <

そのため、上記のケースでは、OPが間違ったファイル名を要求したときに、そのエラーにつながるエラーページ（HTML）が返されました。

それが他の誰かを助けることを願っています:)

1
jsdeveloper