意外的令牌<反应路由器组件中的错误 [英] Unexpected token < error in react router component

问题描述

我正在为我的反应应用程序编写路由器组件。我正在创建新的react类并在componentDidMount方法中定义一些路由。
这是完整的方法

I'm trying to write router component for my react app. I'm create new react class and define some routes in componentDidMount method. This is full method

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<在app.js中：1。但Chrome调试器在我的index.html中显示该错误，我甚至无法在浏览器中调试此错误。每当我使用'/'前往路线时，就会发生此错误。我试图使用其他客户端路由器，如page.js，rlite，grapnel，但都仍然相同。也许有人对这个错误有任何想法？

When I'm go to '/' or '/realty' all works. But, when I'm go to the 'realty/new' I've got error Uncaught SyntaxError: Unexpected token < in app.js:1. But Chrome debugger display that error in my index.html and I even can't debug this in browser. This error happens every time, when I go to the route with '/'. I.m trying to use other client-side routers, like page.js, rlite, grapnel, but all still the same. Maybe someone have any idea about this error?

UPD：这是路由器组件的fuul代码。现在它使用page.js路由，我看到同样的错误

UPD: This is fuul code of router component. Now it use page.js fo routing and I see the same error

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;

推荐答案

意外令牌错误可能会显示为一些不同的原因。我遇到了类似的问题，在我的情况下，问题是在html中加载生成的包的脚本标记是这样的：

The "unexpected token" error can show up for a number of different reasons. I ran into a similar problem, and in my case the problem was that the script tag to load the generated bundle in the html was like so:

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

导航到带参数的路线时（嵌套路线或路线会发生同样的事情）多个网段），浏览器会尝试使用错误的网址加载脚本。在我的情况下，路径路径是'user /：id'，浏览器发出请求' http://127.0.0.1:3000/ < /a>user/scripts/app.js'而不是' http://127.0.0.1 ：3000 /脚本/ app.js 。解决方案很简单，将脚本标记更改为：

When navigating to a route with a parameter (same thing will happen to a nested route or a route with more than one segment), browser would try to load the script using the wrong url. In my case the route path was 'user/:id', and the browser made a request to 'http://127.0.0.1:3000/user/scripts/app.js' instead of 'http://127.0.0.1:3000/scripts/app.js'. The solution was easy, change the script tag to this:

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

这篇关于意外的令牌&lt;反应路由器组件中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！