发表新帖
发表新帖

Unexpected token < error in react router component

后端 未结
关注
5 1845
小鲜肉
小鲜肉 2020-11-27 15:17

I\'m trying to write router component for my react app. I\'m create new react class and define some routes in componentDidMount method. This is full method

c
相关标签:
5条回答
  • 再見小時候
    2020-11-27 15:21

    The "unexpected token" error can show up for a number of different reasons. I ran into a similar problem, and in my case the problem was that the script tag to load the generated bundle in the html was like so:

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

    When navigating to a route with a parameter (same thing will happen to a nested route or a route with more than one segment), browser would try to load the script using the wrong url. In my case the route path was 'user/:id', and the browser made a request to 'http://127.0.0.1:3000/user/scripts/app.js' instead of 'http://127.0.0.1:3000/scripts/app.js'. The solution was easy, change the script tag to this:

    <script src="/scripts/app.js"></script>
    0 讨论(0)
  • 有刺的猬
    2020-11-27 15:21

    Unexpected token "<" in this case comes from a nested path. Components that are in the nested are late to read.

    This is the option that you can do:

    1. Check this https://reactrouter.com/web/example/nesting for documentation
    2. Make the nested path some switch logic with default return. In this component. Take a look at the documentation.

    <RealtyPage id={req.params.id}

    1. In my case, i'm not use that, i make the single path and i send the parameter with a reducer.
    0 讨论(0)
  • 无人及你
    2020-11-27 15:24

    If anyone else is having this problem, please check your devtools network tab for server responses. The reason behind the error message is that you are trying to load a javascript/json file and an html file was returned (possibly an error message).

    HTML files start like this normally:

    <!doctype html>
<html>
...

    The browser sees the first < and gets confused because this is not valid JavaScript so prints out the error message:

    SyntaxError: Unexpected token <

    So in the above case, when the OP requested a wrong filename, he got an error page back (in HTML) which lead to that error.

    Hope that helps someone else :)

    0 讨论(0)
  • 礼貌的吻别
    2020-11-27 15:30

    Had the same error as well when using React-Router properties after adding the "/:uid" to edit relative path in my code:

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

    The problem was caused in my index.html where I load my main reference to my compiled javascript file bundle.js.

    I switched:

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

    to 

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

    And it immediately solved the problem.

    0 讨论(0)
  • 南笙
    2020-11-27 15:43

    do you have this into your package.json ?

    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.7.4",
        "@babel/preset-react": "^7.0.0",
...
}

    if yes -> do you have a .babelrc file ? if not :

    add .babelrc file to your root application. and paste it into : 

    {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

    To finish installation : npm install and npm run dev

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

    0 讨论(0)
 看不清?
提交回复
热议问题