Parsing error: Unexpected token, expected "..."

Question

我有这段代码，组件内有模板文字，但我从 ESLint 收到解析错误。我尝试使用 @babel/eslint-parser 但它没有帮助。还有这个解析错误：意外的令牌，预期的“...”我有'...' expected.ts(1005)

import React from "react";
import { Link } from "react-router-dom";
import logo from "../../images/logo_cl.png";

function Comptetition({ competition }) {
    return (
        <Link to {`/competitions/${competition.id}`}>
            <li className="complist__item">
                <img className="complist__item-image" src={logo} alt="item" />
                <p className="complist__item-name">{competition.name}</p>
                <p className="complist__item-country">{competition.area.name}</p>
            </li>
        </Link>
        
    );
}

export default Comptetition;

我的 .eslintrc.json 看起来像这样：

    {
  "env": {
    "browser": true,
    "jest": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "import",
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "requireConfigFile": false,
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    },
    "babelOptions": {
      "presets": [
        "@babel/preset-react"
      ]
    }
  },
  "rules": {
    "semi": "error",
    "no-console": "warn",
    "no-eval": "error",
    "import/first": "error",
    "prefer-template": 1,
    "no-param-reassign": [
      2,
      {
        "props": false
      }
    ]
  }
}

我已经阅读了很多信息，但无法在 VScode

中解决此错误

Answer 1

从代码来看，您似乎看到了正确的行，但看错了地方。

You're missing a "=" for value to "to" prop of the Link

<Link to={`/competitions/${competition.id}`}>

Answer 2

您忘记在 to

中添加 =

to={`/competitions/${competition.id}`}

Parsing error: Unexpected token, expected "..."

Parsing error: Unexpected token, expected "..."

javascript

parsing-error

jsx

reactjs

eslint