Routing not working using Gatsby - reach-router

Question

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

Answer 1

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.