意外的令牌 <反应路由器组件中的错误 [英] 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:这是路由器组件的完整代码.现在它使用 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>

当导航到带有参数的路由时(嵌套路由或具有多个段的路由也会发生同样的情况)，浏览器会尝试使用错误的 url 加载脚本.在我的例子中，路由路径是user/:id"，浏览器向http://127.0.0.1:3000/user/scripts/app.js' 而不是 'http://127.0.0.1:3000/scripts/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屋！