0

我正在尝试将博客呈现为卡片，然后将其作为页面打开，但事实证明使用 Gatsby 很难。我使用 React 路由器做出了完全相同的反应，但它似乎不适用于 Gatsby。我知道我可以使用 GraphQL，但我当然可以使用 REST 做同样的事情。我正在使用内容丰富的顺便说一句

我按照另一篇文章中的建议切换到路由器，但这不起作用。

当我使用 react-router-dom 时，我不断收到此错误：

Invariant failed: You should not use <Link> outside a <Router>

获取博客内容

function Blog() {
  
    const [blogs, setBlogs] = useState([])
    const [image, setImage] = useState()
    const [selectedBlog, setSelectedBlog] = useState(blogs)

    useEffect(() => {
        fetch("http://cdn.contentful.com...")
        .then(response => response.json())
        .then(data =>
          setBlogs(data.items)
       
        )
      }, []) 
      console.log(blogs)
    return (
        <>
        <div  className="card-flex" >
        {selectedBlog !== null ? blogs.map((blog =>
          <Card title={blog.fields.title}  date={blog.fields.date} introduction={blog.fields.introduction} mainBody1={blog.fields.mainBody1} mainBody2={blog.fields.mainBody2} setSelectedBlog={selectedBlog} 
           />  
          )): 
             <Article title={blogs.find(d => d.fields.title === selectedBlog)}   />
        }
         </div>
         </>
      
    ) 
}

export default Blog

博客卡

function Card(props) {

  
  console.log(props)
    return (
            
      <div class="container">

      <div class="card">
          <div class="card-header">
              <img style={{backgroundImage: "url('https://i.pinimg.com/564x/7f/bb/97/7fbb9793b574c32f5d28cae0ea5c557f.jpg')"}}/> 
          </div>
          <div class="card-body">
              <span class="tag tag-teal">{props.tags}</span>
              <h4>{props.title}</h4>
             <p style={{fontSize:"17px", paddingTop:"10px"}} >{props.introduction}</p>
              <div class="card-user">
              <Link
              to={{
                pathname: '/article',
                state: {
                  title: props.title,
                  introduction: props.introduction  
                }
              }}
            >
              <button>read more</button>
            </Link>
                  <div class="user-info">
                      <h5 >{  props.date}</h5>
      
                  </div>
              </div>
          </div>
      </div>
      </div>
    

    )   
}

export default Card

**文章 **

import React from 'react'
import './Article.css'
import { useLocation } from "@reach/router"

function Article(props) {
// useLocation to access the route state from Blog.js 
const { state = {} } = useLocation();

console.log(state)


    return (
        <div className="main">   
            <h1 className="title">{state.title}</h1>
            <p className="intro">{state.introduction}</p>
             <p className="main1">{state.mainBody1}</p>
             <p className="main2">{state.mainBody2}</p>
        </div>
    )
}

export default Article

4

1 回答 1

0

我认为你在混合东西。Gatsby 扩展自，@reach/router因此您不需要使用它的符号。您的链接应如下所示：

<Link
  to={`/article`}
  state={{
    title: props.title,
    introduction: props.introduction  
  }}
>

假设您的/article页面存在于/pages文件夹下。

于 2021-07-18T09:51:50.567 回答