解析错误：意外的标记，应为“...”

Question

I have this code with template literals inside component and I'm getting parsing error from ESLint. I tried to use @babel/eslint-parser but it doesn't help. Also with this Parsing error: 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;

my.eslintrc.json looks like this:

    {
  "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
      }
    ]
  }
}

I've already read lot of info but cannot resolve this error in VScode

Answer 1

From the code it looks like you're looking at the correct line but the wrong place.

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

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

Answer 2

You forget to add = in to

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