解析错误：意外的令牌，预期的“...”

Question

我在组件中有这个带有模板文字的代码，我从 ESLint 得到解析错误。我尝试使用 @babel/eslint-parser 但它没有帮助。还有这个解析错误：Unexpected token, expected "..." I have '...' 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

从代码看来，您查看的是正确的行但位置错误。

你缺少一个“=”来表示链接的“to”属性

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

Answer 2

您忘记在to 中添加=

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