Ссылка возвращает undefined при сопоставлении массива с компонентом JSX - PullRequest
Новая
       67

Ссылка возвращает undefined при сопоставлении массива с компонентом JSX

0 голосов
/ 11 июля 2020

Следующий код выдает ошибку, когда я посещаю страницу, на которой отображается этот компонент: 

import React from 'react'
import Layout from '../components/layout'
import SEO from '../components/seo'

import {
  Divider,
  Card,
  Link,
} from '@blueprintjs/core'
 

const TagPage = ({ pageContext }) => {
  const { name, description, tagsCount, questions, } = pageContext

  return (
    <Layout>
      <SEO title={name} description={description} />
      <h1>{name}</h1>
      <p>{description}</p>
      <Divider />
      <br/><br/>

      {questions.map((q) => {
        return (
        <>
          <Link 
            to={`tagsQuestion-${q.id}`} 
            style={{
              color: `inherit`,
              textDecoration: `none`,
            }}
          >
            <Card interactive='true'>
              <p>{q.id}</p>
              <p>{q.prompt}</p>
              
            </Card>
          </Link>
          <br/>
        </>
      )
      })}
      
    </Layout>
  )
}
  
export default TagPage

Однако, если я изменю: 

<Link to={`/question/${q.id}`}>...</Link>

на 

<a href={`/question/${q.id}`} >...</a>

, тогда страница будет отображаться и использоваться без ошибок.

Это текущее сообщение об ошибке, которое я получаю: 

(AppContainer, in main (at layout.js:33)) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `TagPage

Вопрос :

Почему я не могу использовать компонент Link в этой ситуации?

Информация:

questions представляет собой массив TagPage - это страница, созданная в gatsby-node.js

Спасибо, за ваше время, не стесняйтесь задавать вопросы по мере необходимости.

1 Ответ

0 голосов
/ 11 июля 2020

заменить 

import {
  Divider,
  Card,
  Link,
} from '@blueprintjs/core'

на 

import { Link } from 'gatsby'
import {
  Divider,
  Card,
} from '@blueprintjs/core'
...