Ошибка синтаксиса при передаче theme.id в Link в React

При работе с React и JSX часто возникает ошибка, когда внутри атрибута компонента Link используется интерполяция с неправильным синтаксисом. В вашем случае проблема в том, что вы обернули theme.id в фигурные скобки {} внутри строки, что приводит к синтаксической ошибке. JSX ожидает, что фигурные скобки будут означать вставку выражения JavaScript, но здесь они оказались внутри строкового литерала, из-за чего парсер видит невалидный объект.

Как правильно передать значение id в Link

Для корректной передачи динамического значения в атрибут to компонента Link из React Router используйте шаблонные строки (template literals) или конкатенацию. Вот исправленный код:

{testThemes.map((theme, index) =>
  <Link to={`/posts/${theme.id}`} className={style.theme} key={index}>
    <div>
      {theme.countPosts > 99 ? <p>99+</p> : <p>{theme.countPosts}</p>}
    </div>
    <h2>{theme.title}</h2>
  </Link>
)}

Почему возникает ошибка

В исходном коде вы написали to={'/posts/'+{theme.id}}. Здесь {theme.id} интерпретируется как объект JavaScript (поскольку фигурные скобки в JSX обозначают выражение), а не как строка. Конкатенация строки '/posts/' с объектом приводит к невалидному значению. Парсер видит { и ожидает запятую или другой синтаксический элемент, поэтому подчёркивает точку.

Рекомендации по работе с map в React

• Всегда добавляйте атрибут key (например, key={theme.id} или key={index}) для элементов внутри map, чтобы React мог эффективно обновлять DOM.
• Используйте шаблонные строки (обратные кавычки) для вставки переменных в строки: {`/posts/${theme.id}`}.
• Для условного рендеринга применяйте тернарный оператор, как показано в примере выше - это делает код компактнее и читабельнее.

Дополнительные советы по SEO-оптимизации React-приложений

При разработке на React для улучшения индексации поисковыми системами используйте серверный рендеринг (SSR) или статическую генерацию (например, с Next.js). Это гарантирует, что динамические маршруты (как /posts/:id) будут доступны для краулеров. Также следите за корректной передачей мета-тегов и заголовков для каждой страницы.