useLocation 不渲染道具 - Gatsby 路由

如何解决useLocation 不渲染道具 - Gatsby 路由

我正在尝试将博客呈现为卡片，然后将其作为页面打开，但事实证明使用 Gatsby 很难。我使用 React 路由器和 useLocation 对 React 做了同样的事情，但它似乎不适用于 Gatsby。

我按照另一篇文章中的建议切换到路由器，但这不起作用。我现在正在寻找另一种可能不需要使用 useLocation 的方法。

我在使用 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

解决方法

我相信你不应该在 Gatsby 项目中使用 react-router：https://www.gatsbyjs.com/docs/reference/routing/creating-routes/

对于普通项目，您可以执行以下操作： 转到最顶层的元素并用路由器包装它。 https://reactrouter.com/web/api/BrowserRouter

您基本上必须搜索ReactDom.render(<YourApp />)并执行ReactDom.render(<Router><YourApp /></Router>)