Ser*_*nin 38 javascript html5-history reactjs
我正在尝试为我的反应应用程序编写路由器组件.我正在创建新的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} />
});
});
},
Run Code Online (Sandbox Code Playgroud)
当我去'/'或'/ 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;
Run Code Online (Sandbox Code Playgroud)
Fas*_*tas 140
"意外令牌"错误可能由于多种不同原因而出现.我遇到了类似的问题,在我的情况下,问题是在html中加载生成的bundle的脚本标记是这样的:
<script src="scripts/app.js"></script>
Run Code Online (Sandbox Code Playgroud)
当导航到带有参数的路由时(嵌套路由或具有多个段的路径会发生同样的事情),浏览器会尝试使用错误的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>
Run Code Online (Sandbox Code Playgroud)
在添加“/:uid”以编辑代码中的相对路径后,使用 React-Router 属性时也出现相同的错误:
<Route path="/edit/:uid" component={EditPage}/>
Run Code Online (Sandbox Code Playgroud)
该问题是在我的index.html 中引起的,我在其中加载了对已编译的javascript 文件bundle.js 的主要引用。
我切换:
<script src="./bundle.js"></script>
Run Code Online (Sandbox Code Playgroud)
到
<script src="/bundle.js"></script>
Run Code Online (Sandbox Code Playgroud)
它立即解决了问题。
如果其他人遇到此问题,请检查您的开发工具网络选项卡以获取服务器响应。错误消息背后的原因是您正在尝试加载 javascript/json 文件并且返回了 html 文件(可能是错误消息)。
HTML 文件通常是这样开始的:
<!doctype html>
<html>
...
Run Code Online (Sandbox Code Playgroud)
浏览器看到第一个 < 并感到困惑,因为这不是有效的 JavaScript,因此打印出错误消息:
SyntaxError: Unexpected token <
Run Code Online (Sandbox Code Playgroud)
因此,在上述情况下,当 OP 请求错误的文件名时,他会返回一个错误页面(HTML 格式),从而导致该错误。
希望对其他人有帮助:)
| 归档时间: |
|
| 查看次数: |
17592 次 |
| 最近记录: |