0

I'm trying to render a blog as a card then open it up as a page , but its proving to be difficult using Gatsby. I did the exact same thing fine with react using React router but it doesn't seem to be working with Gatsby. I know I can use GraphQL but surely I can do the same thing using REST. Im using Contentful btw

I switched to reach router as suggested in another post but that doesnt work.

I kept getting this error when I used react-router-dom:

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

Fetching Blog contents

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

Blog Card

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

**Article **

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
Shuib Abdillahi
  • 37
  • 6
  • For this error "Invariant failed: You should not use outside a ", you just missing for example: ` `, example 2: `
    `     – Anees Hikmat Abu Hmiad Jul 10 '21 at 17:21
  • tried this, doesnt work. its giving me a 404 error now and wont redirect me to the article page – Shuib Abdillahi Jul 10 '21 at 19:36
  • That's means, you have an error in your routing URL now...So that the first issue resolved, the second issue check your URL and your path in – Anees Hikmat Abu Hmiad Jul 10 '21 at 19:41
  • the url is correct as its in the pages folder. Im getting this error when I moved it to the pages folder : Children of must have a `path` or `default` prop, or be a ``. None found on element type `[object Object]` – Shuib Abdillahi Jul 10 '21 at 19:55
  • I did this exact same thing using React and React Router and it worked fine, im not sure why it doesnt work with Gatsby. Im using useLocation the same too and providing the state to the Link – Shuib Abdillahi Jul 10 '21 at 19:56

1 Answers1

0

I think you are mixing stuff. Gatsby extends from @reach/router so you don't need to use its notation. Your Link should look like:

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

Assuming your /article page exists under /pages folder.

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67