Fatal编程技术网
  • javascript/
  • Javascript 意外标记<；路由器组件中出现错误

Javascript 意外标记<；路由器组件中出现错误

javascript reactjs

Javascript 意外标记<；路由器组件中出现错误,javascript,reactjs,html5-history,Javascript,Reactjs,Html5 History,我正在尝试为我的react应用程序编写路由器组件。我正在创建新的react类，并在componentDidMount方法中定义一些路由。 这是一个完整的方法 componentDidMount: function () { var me = this; router.get('/', function(req){ me.setState({ component: <MainPage /> }); })

我正在尝试为我的react应用程序编写路由器组件。我正在创建新的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} />
        });
    });

},

componentDidMount:function（）{
var me=这个；
router.get（'/'，函数（req）{
我是塞斯塔({
组成部分：
});
});
router.get（'/realty'，函数（req）{
我是塞斯塔({
组成部分：
});
});
router.get（'/realty/：id'，函数（req）{
我是塞斯塔({
组成部分：
});
});
},
当我去“/”或“/房地产”时，一切都好。但是，当我转到'realty/new'时，我得到了错误Uncaught SyntaxError:Unexpected token UPD：这是路由器组件的fuul代码。现在它使用page.js fo路由，我看到了相同的错误

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;

var React=require（'React'）；
var page=需要（'page'）；
var MainPage=require（“../components/MainPage”）；
var RealtyPage=require（“../components/RealtyPage”）；
var Router=React.createClass({
getInitialState:函数（）{
返回{
组成部分：
}
},
componentDidMount:函数（）{
var me=这个；
页面（“/”，函数（ctx）{
我是塞斯塔({
组成部分：
});
});
页面（'/realty'，函数（ctx）{
我是塞斯塔({
组成部分：
});
});
page.start（）；
},
render:function（）{
返回此.state.component
}
});
module.exports=路由器；
出现“意外令牌”错误可能有多种原因。我遇到了类似的问题，在我的例子中，问题是在html中加载生成包的脚本标记如下：

<script src="scripts/app.js"></script>
当导航到带有参数的路由时（嵌套路由或具有多个段的路由也会发生同样的情况），浏览器将尝试使用错误的url加载脚本。在我的例子中，路由路径是“user/：id”，浏览器向“user/scripts/app.js”而不是“”发出请求。解决方案很简单，将脚本标记更改为：

<script src="/scripts/app.js"></script>
如果其他人有此问题，请检查devtools网络选项卡以获取服务器响应。错误消息背后的原因是您试图加载一个javascript/json文件，但返回了一个html文件（可能是错误消息）

HTML文件通常是这样开始的：

<!doctype html>
<html>
...


...
浏览器看到第一个<，会感到困惑，因为这不是有效的JavaScript，所以会打印错误消息：

SyntaxError: Unexpected token <

SyntaxError:意外标记<
所以在上面的例子中，当OP请求一个错误的文件名时，他得到了一个错误页面（HTML），这导致了错误

希望这对其他人有所帮助：）

在添加“/：uid”以编辑代码中的相对路径后，使用React路由器属性时也出现了相同的错误：

<Route path="/edit/:uid" component={EditPage}/>
这个问题是在index.html中引起的，我在这里加载了对已编译javascript文件bundle.js的主要引用

我换了：

        <script src="./bundle.js"></script>
到
它立即解决了这个问题。

您的package.json中有这个吗

"devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.7.4",
        "@babel/preset-react": "^7.0.0",
...
}
如果是->您是否有
.babelrc
文件？ 如果没有：

将
.babelrc
文件添加到根应用程序。并将其粘贴到：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
要完成安装：
npm安装
和
npm运行开发

来源：

意外标记“我不确定为什么要将服务器端节点代码与客户端反应代码耦合…我正在使用grapnel库进行客户端路由。由var router=new grapnel（）创建的对象路由器。我正在尝试使用其他库，但结果仍然相同。哦，好吧，我的错是，我以为代码中是express router。您可以尝试链接完整的源代码吗？错误似乎发生在第1行。可能是您的HTML脚本中缺少JSXTTransformer。我正在使用gulp和browserify+reactify。只有当我转到包含“/”的地址。我认为代码中的某个地方存在问题，它与Histor API一起工作，所有库都使用相同的代码。这是Chome的屏幕，有错误。发布完整的
app.js
，这样我们就可以帮助找出错误的来源。此解决方案不是一个明显的问题！谢谢。如果不是这样，我们将永远找不到它谢谢你。谢谢Fastas。非常有用，很高兴得到这个答案。将
添加到
index.html的
（从这里开始：）非常感谢。我为这个问题浪费了一个小时。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}