我试图将博客呈现为一张卡片，然后将其作为一个页面打开，但事实证明使用盖茨比很困难。我使用react路由器对react做了完全相同的事情，但它似乎对盖茨比不起作用。我知道我可以使用graphql，但我肯定可以使用rest做同样的事情。我正在使用内容丰富的btw
我按照另一篇文章的建议切换到了路由器，但这不起作用。
当我使用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