反应路由器组件中出现意外的令牌<错误
Posted
技术标签:
【中文标题】反应路由器组件中出现意外的令牌<错误【英文标题】：Unexpected token < error in react router component 【发布时间】：2015-06-25 10:37:41 【问题描述】：我正在尝试为我的 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: Unexpected token
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;
【问题讨论】：
我不确定您为什么要将服务器端节点代码与客户端 React 代码耦合... 我正在使用 grapnel 库进行客户端路由。由 var router = new Grapnel() 创建的对象路由器。我正在尝试使用其他库，但结果仍然相同。 哦，好吧，那我的错，我以为是那个代码中的快速路由器。您可以尝试链接您的完整源代码吗？错误似乎发生在第 1 行。可能是您的 html 脚本中缺少 JSXTransformer。 我正在使用 gulp 和 browserify + reactify。仅当我转到包含“/”的地址时才会发生错误。我认为代码中的某个地方存在问题，它与 Histor API 一起使用，并且所有库都使用相同的代码。这是来自 Chome 的错误屏幕。 Error screen 发布完整的app.js，以便我们帮助找出错误的来源
【参考方案1】：
在这种情况下，意外的标记“
这是您可以执行的选项：
-
查看此https://reactrouter.com/web/example/nesting 以获取文档
使嵌套路径成为一些默认返回的开关逻辑。在这个组件中。查看文档。
-
在我的情况下，我没有使用它，我创建单一路径并使用减速器发送参数。
【讨论】：
【参考方案2】：你的 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 install 和 npm run dev
来源：https://github.com/babel/babel-loader/issues/789#issuecomment-491554727
【讨论】：
【参考方案3】：在我的代码中添加“/:uid”来编辑相对路径后，使用 React-Router 属性时也出现了同样的错误：
<Route path="/edit/:uid" component=EditPage/>
问题是在我的 index.html 中引起的，我在其中加载了对已编译的 javascript 文件 bundle.js 的主要引用。
我换了：
<script src="./bundle.js"></script>
到
<script src="/bundle.js"></script>
它立即解决了问题。
【讨论】：
非常感谢。这个对我有用。几个月来我一直在寻找解决方案。【参考方案4】：如果其他人遇到此问题，请检查您的 devtools 网络选项卡以获取服务器响应。错误消息背后的原因是您尝试加载 javascript/json 文件并返回了 html 文件（可能是错误消息）。
HTML 文件通常这样开始：
<!doctype html>
<html>
...
浏览器看到第一个
SyntaxError: Unexpected token <
所以在上述情况下，当 OP 请求错误的文件名时，他会返回一个错误页面（在 HTML 中），这会导致该错误。
希望对其他人有所帮助:)
【讨论】：
【参考方案5】：“意外令牌”错误的出现可能有多种不同的原因。我遇到了类似的问题，在我的情况下，问题是在 html 中加载生成的包的脚本标签是这样的：
<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>
【讨论】：
这个解决方案不是很明显！谢谢。 如果不是你，永远不会找到这个。谢谢法斯塔斯。 非常有用，很高兴得到这个答案。 将<base href="/" /> 添加到index.html 的<head> 中（来自这里：***.com/a/34526066/4804896）
非常感谢。我在这个问题背后浪费了一个小时。以上是关于反应路由器组件中出现意外的令牌<错误的主要内容，如果未能解决你的问题，请参考以下文章