Javascript 意外令牌<反应路由器组件中的错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29718481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unexpected token < error in react router component
提问by Sergey Troinin
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
我正在尝试为我的 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} />
});
});
},
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?
当我去'/'或'/realty'时一切正常。但是，当我去'realty/new' 时，我得到了错误 Uncaught SyntaxError: Unexpected token < in app.js:1。但是 Chrome 调试器在我的 index.html 中显示该错误，我什至无法在浏览器中调试它。当我使用“/”进入路线时，每次都会发生此错误。我尝试使用其他客户端路由器，如 page.js、rlite、grapnel，但仍然相同。也许有人对这个错误有任何想法？
UPD: This is fuul code of router component. Now it use page.js fo routing and I see the same error
UPD：这是路由器组件的完整代码。现在它使用 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;
回答by Fastas
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:
出现“意外令牌”错误的原因有很多。我遇到了类似的问题，就我而言，问题是在 html 中加载生成的包的脚本标签是这样的：
<script src="scripts/app.js"></script>
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:
当导航到带有参数的路由时（嵌套路由或具有多个段的路由也会发生同样的情况），浏览器会尝试使用错误的 url 加载脚本。在我的情况下，路由路径是“用户/：身”，浏览器作出“请求http://127.0.0.1:3000/用户/scripts/app.js”而不是' http://127.0.0.1 :3000/scripts/app.js'. 解决方案很简单，将脚本标记更改为：
<script src="/scripts/app.js"></script>
回答by jsdeveloper
If anyone else is having this problem, please check your devtools network tab for server responses. The reason behind the error message is that you are trying to load a javascript/json file and an html file was returned (possibly an error message).
如果其他人遇到此问题，请检查您的 devtools 网络选项卡以获取服务器响应。错误消息背后的原因是您正在尝试加载 javascript/json 文件并返回了 html 文件（可能是错误消息）。
HTML files start like this normally:
HTML 文件通常是这样开始的：
<!doctype html>
<html>
...
The browser sees the first < and gets confused because this is not valid JavaScript so prints out the error message:
浏览器看到第一个 < 并感到困惑，因为这不是有效的 JavaScript，因此打印出错误消息：
SyntaxError: Unexpected token <
So in the above case, when the OP requested a wrong filename, he got an error page back (in HTML) which lead to that error.
因此，在上述情况下，当 OP 请求错误的文件名时，他返回了一个错误页面（HTML 格式），导致该错误。
Hope that helps someone else :)
希望能帮助别人:)
回答by Charles Vogt
Had the same error as well when using React-Router properties after adding the "/:uid" to edit relative path in my code:
在我的代码中添加“/：uid”以编辑相对路径后，在使用 React-Router 属性时也有同样的错误：
<Route path="/edit/:uid" component={EditPage}/>
The problem was caused in my index.html where I load my main reference to my compiled javascript file bundle.js.
问题是在我的 index.html 中引起的，我在其中加载了对我编译的 javascript 文件 bundle.js 的主要引用。
I switched:
我换了：
<script src="./bundle.js"></script>
to
到
<script src="/bundle.js"></script>
And it immediately solved the problem.
它立即解决了问题。
回答by Thibaut
do you have this into your package.json ?
你有这个到你的 package.json 吗？
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/preset-react": "^7.0.0",
...
}
if yes -> do you have a .babelrcfile ?
if not :
如果是 -> 你有.babelrc文件吗？如果不 ：
add .babelrcfile to your root application. and paste it into :
将.babelrc文件添加到您的根应用程序。并将其粘贴到：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
To finish installation : npm installand npm run dev
完成安装：npm install和npm run dev
source : https://github.com/babel/babel-loader/issues/789#issuecomment-491554727
来源：https: //github.com/babel/babel-loader/issues/789#issuecomment-491554727
