Question

我正在尝试为我的反应应用编写路由器组件。我创建了新的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} />
        });
    });

},

当我去＆＃39; /＆＃39;或者＆＃39; / realty＆＃39;一切都有效。但是，当我进入＆＃39;房地产/新的＆＃39;我有错误Uncaught SyntaxError：意外的令牌＆lt;在app.js中：1。但Chrome调试器在我的index.html中显示错误，我甚至无法在浏览器中调试此错误。每当我使用＆＃39; /＆＃39;前往路线时，就会发生此错误。我试图使用其他客户端路由器，如page.js，rlite，grapnel，但都仍然相同。也许有人对这个错误有任何想法？

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

Answer 1

＆＃34;意外令牌＆＃34;错误可能会出现多种原因。我遇到了类似的问题，在我的情况下，问题是在html中加载生成的bundle的脚本标记是这样的：

<script src="scripts/app.js"></script>

当导航到带有参数的路由时（嵌套路由或具有多个段的路径会发生同样的事情），浏览器会尝试使用错误的URL加载脚本。在我的情况下，路径路径为＆＃39; user /：id＆＃39;，并且浏览器向＆＃39; http://127.0.0.1:3000/ 用户 /scripts/app.js&#发出请求39;而不是＆＃39; http://127.0.0.1:3000/scripts/app.js＆＃39;。解决方案很简单，将脚本标记更改为：

<script src="/scripts/app.js"></script>

Answer 2

如果其他人遇到此问题，请检查您的devtools网络选项卡以获取服务器响应。错误消息背后的原因是，您正在尝试加载javascript / json文件，并且返回了html文件（可能是错误消息）。

HTML文件通常是这样启动的：

<!doctype html>
<html>
...

浏览器看到第一个<并感到困惑，因为这不是有效的JavaScript，因此会打印出错误消息：

SyntaxError: Unexpected token <

因此，在上述情况下，当OP请求错误的文件名时，他返回了错误页面（以HTML格式），从而导致该错误。

希望对其他人有所帮助：）

Answer 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>

它立即解决了问题。

Answer 4

您是否将此文件放入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

Answer 5

在这种情况下，意外的令牌“ <”来自嵌套路径。嵌套的组件无法及时读取。

这是您可以执行的选择：

检查此https://reactrouter.com/web/example/nesting以获得文档
使用默认返回值使嵌套路径具有某些开关逻辑。在此组件中。看看文档。

在我的情况下，我不使用它，我创建了单个路径，并使用化简器发送了参数。

意外的令牌＆lt;反应路由器组件中的错误

5 个答案: