意外令牌<反应路由器组件中的错误
[英]Unexpected token < error in react router component
问题描述
I'm trying to write router component for my react app.
我正在尝试为我的 React 应用程序编写路由器组件。 I'm create new react class and define some routes in componentDidMount method.我正在创建新的反应类并在 componentDidMount 方法中定义一些路由。 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} />
});
});
},
When I'm go to '/' or '/realty' all works.当我去'/'或'/realty'时一切正常。 But, when I'm go to the 'realty/new' I've got error Uncaught SyntaxError: Unexpected token < in app.js:1.但是，当我去'realty/new' 时，我得到了错误 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.但是 Chrome 调试器在我的 index.html 中显示该错误，我什至无法在浏览器中调试它。 This error happens every time, when I go to the route with '/'.当我使用“/”进入路线时，每次都会发生此错误。 Im trying to use other client-side routers, like page.js, rlite, grapnel, but all still the same.我尝试使用其他客户端路由器，如 page.js、rlite、grapnel，但仍然相同。 Maybe someone have any idea about this error?也许有人对这个错误有任何想法？
UPD: This is fuul code of router component. UPD：这是路由器组件的完整代码。 Now it use page.js fo routing and I see the same error现在它使用 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;
5 个解决方案
解决方案1
169 2016-02-09 21:31:48
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.当导航到带有参数的路由时（嵌套路由或具有多个段的路由也会发生同样的情况），浏览器会尝试使用错误的 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 '.在我的情况下，路由路径是“用户/：身份证”，浏览器作出“请求http://127.0.0.1:3000/用户/scripts/app.js”而不是' 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>
解决方案2
4 2019-12-26 17:04:23
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.它立即解决了问题。
解决方案3
3 2019-03-17 18:16:23
If anyone else is having this problem, please check your devtools network tab for server responses.如果其他人遇到此问题，请检查您的 devtools 网络选项卡以获取服务器响应。 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).错误消息背后的原因是您正在尝试加载 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 :)希望能帮助别人:)
解决方案4
1 2020-01-13 13:11:46
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 .babelrc file ?如果是 -> 你有.babelrc文件吗？ if not :如果不 ：
add .babelrc file to your root application.将.babelrc文件添加到您的根应用程序。 and paste it into :并将其粘贴到：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
To finish installation : npm install and 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
解决方案5
1 2020-10-20 06:08:18
Unexpected token "<" in this case comes from a nested path.在这种情况下，意外标记“<”来自嵌套路径。 Components that are in the nested are late to read.嵌套中的组件读取晚了。
This is the option that you can do:这是您可以执行的选项：
- Check this https://reactrouter.com/web/example/nesting for documentation检查此https://reactrouter.com/web/example/nesting以获取文档
- Make the nested path some switch logic with default return.使嵌套路径具有默认返回的一些开关逻辑。 In this component.在这个组件中。 Take a look at the documentation.看看文档。
<RealtyPage id={req.params.id}
- In my case, i'm not use that, i make the single path and i send the parameter with a reducer.就我而言，我不使用它，我创建了单个路径并使用减速器发送参数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.