javascript - router4 - this.props.history.push




反应路由器组件中出现意外的令牌<错误 (2)

我正在尝试为我的反应应用程序编写路由器组件。 我正在创建新的react类并在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:意外的令牌<在app.js:1中。 但Chrome调试器在我的index.html中显示该错误,我甚至无法在浏览器中调试此错误。 每当我使用'/'前往路线时,就会发生此错误。 我试图使用其他客户端路由器,如page.js,rlite,grapnel,但都仍然相同。 也许有人对这个错误有任何想法?

UPD:这是路由器组件的fuul代码。 现在它使用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;

“意外令牌”错误可能由于多种不同原因而出现。 我遇到了类似的问题,在我的情况下,问题是在html中加载生成的bundle的脚本标记是这样的:

<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>

如果其他人遇到此问题,请检查您的devtools网络选项卡以获取服务器响应。 错误消息背后的原因是您正在尝试加载javascript / json文件并返回了一个html文件(可能是一条错误消息)。

HTML文件通常如下所示:

<!doctype html>
<html>
...

浏览器看到第一个<并且感到困惑,因为这不是有效的JavaScript,因此打印出错误消息:

SyntaxError: Unexpected token <

因此,在上述情况下,当OP请求错误的文件名时,他得到一个错误页面(用HTML格式),这会导致该错误。

希望能帮助别人:)







html5-history