反应路由器组件中出现意外的令牌<错误答案

【问题标题】：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，以便我们帮助找出错误的来源

标签： javascript reactjs html5-history

【解决方案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> 中（来自这里：stackoverflow.com/a/34526066/4804896）
非常感谢。我在这个问题背后浪费了一个小时。