意外令牌 < react-router组件中的错误

IT技术 javascript reactjs html5-history
2021-03-03 07:40:10

我正在尝试为我的 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: Unexpected token < in app.js:1。但是 Chrome 调试器在我的 index.html 中显示该错误,我什至无法在浏览器中调试它。当我使用“/”进入路线时,每次都会发生此错误。我尝试使用其他客户端路由器,如 page.js、rlite、grapnel,但仍然相同。也许有人对这个错误有任何想法?

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;
5个回答

出现“意外令牌”错误的原因有很多。我遇到了类似的问题,就我而言,问题是在 html 中加载生成的包的脚本标签是这样的:

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

当导航到带有参数的路由时(嵌套路由或具有多个段的路由也会发生同样的事情),浏览器会尝试使用错误的 url 加载脚本。在我的情况下,路由路径是“用户/:身份证”,浏览器作出“请求http://127.0.0.1:3000/用户/scripts/app.js”而不是' http://127.0.0.1 :3000/scripts/app.js '. 解决方案很简单,将脚本标记更改为:

<script src="/scripts/app.js"></script>
如果不是你,永远不会发现这个。谢谢法斯塔斯。
2021-04-15 07:40:10
添加<base href="/" /><head>index.html(从这里:stackoverflow.com/a/34526066/4804896
2021-04-16 07:40:10
非常感谢。我在这个问题后面浪费了一个小时。
2021-04-22 07:40:10
非常有用,很高兴得到这个答案。
2021-04-26 07:40:10
这个解决方案不是显而易见的!谢谢。
2021-05-02 07:40:10

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

HTML 文件通常是这样开始的:

<!doctype html>
<html>
...

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

SyntaxError: Unexpected token <

因此,在上述情况下,当 OP 请求错误的文件名时,他返回了一个错误页面(在 HTML 中),导致该错误。

希望能帮助别人:)

在我的代码中添加“/:uid”以编辑相对路径后,在使用 React-Router 属性时也有同样的错误:

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

问题是在我的 index.html 中引起的,我在其中加载了对我编译的 javascript 文件 bundle.js 的主要引用。

我换了:

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

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

它立即解决了问题。

非常感谢。这个对我有用。我几个月来一直在寻找解决方案。
2021-05-10 07:40:10

你有这个到你的 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 installnpm run dev

来源:https : //github.com/babel/babel-loader/issues/789#issuecomment-491554727

在这种情况下,意外标记“<”来自嵌套路径。嵌套中的组件读取较晚。

这是您可以执行的选项:

  1. 检查此https://reactrouter.com/web/example/nesting以获取文档
  2. 使嵌套路径具有默认返回的一些开关逻辑。在这个组件中。看看文档。

<RealtyPage id={req.params.id}

  1. 就我而言,我不使用它,我创建了单个路径并使用减速器发送参数。