React Router组件中的意外标记<错误

Question

React Router组件中的意外标记<错误

54

我正在尝试为我的React应用程序编写路由组件。我创建了一个新的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：在app.js:1中意外的token <。但Chrome调试器显示该错误出现在我的index.html中，我甚至无法在浏览器中进行调试。每次访问带有'/'的路由时都会出现此错误。我尝试使用其他客户端路由器，例如page.js、rlite、grapnel，但仍然相同。也许有人对这个错误有什么想法吗？

更新：这是路由器组件的完整代码。现在它使用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;

- Sergey Troinin

我不确定你为什么要把服务器端的Node代码与客户端的React代码耦合在一起... - Keith Yong

我正在使用Grapnel库进行客户端路由。通过var router = new Grapnel()创建了路由器对象。我尝试使用其他库，但结果仍然相同。 - Sergey Troinin

2

请发布您的完整 app.js，以便我们帮助找出错误来自哪里。 - Keith Yong

你最终解决了这个问题吗？ - cwurtz

我遇到了同样的问题，当使用htaccess将请求重定向到index.html时（以避免在刷新页面时页面中断）。你能解决这个问题吗？ - Jaakko Karhu

显示剩余4条评论

5个回答

6

当我在我的代码中添加"/:uid"以编辑相关路径后，使用React-Router属性时也遇到了相同的错误：

<Route path="/edit/:uid" component={EditPage}/>

问题出现在我的index.html文件中，这里加载了我的编译后的JavaScript文件bundle.js的主要引用。

我进行了如下修改：

        <script src="./bundle.js"></script>

为了

        <script src="/bundle.js"></script>

它立即解决了问题。

- Charles Vogt

5

如果其他人也遇到这个问题，请检查开发者工具的网络选项卡以查看服务器响应。错误消息背后的原因是您正在尝试加载JavaScript/JSON文件，但返回的是HTML文件（可能是错误消息）。

通常，HTML文件以此方式开始：

<!doctype html>
<html>
...

浏览器看到第一个“<”时感到困惑，因为这不是有效的JavaScript语法，所以会打印出错误信息。

SyntaxError: Unexpected token <

因此，在上述情况下，当操作者请求错误的文件名时，他会收到一个错误页面（在HTML中），从而导致该错误。

希望这能帮助其他人 :)

- jsdeveloper

1

在这种情况下，意外的"<"令人困扰，因为它来自嵌套路径。嵌套中的组件读取速度较慢。

以下是您可以采取的选项：

查看此文档https://reactrouter.com/web/example/nesting。
将嵌套路径设置为一些开关逻辑，并进行默认返回。请参阅文档中的此组件。

<RealtyPage id={req.params.id}

在我的情况下，我不使用它，而是创建单个路径并使用 reducer 发送参数。

- darkscripter

1

你的 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

- Thibaut

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oded · Accepted Answer

"unexpected token"错误可能出现的原因有很多。我遇到了类似的问题，在我的情况下，问题是在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>