title: useLocation not rending props - Gatsby routing
body: <p>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 same thing fine with react using React router and useLocation but it doesn't seem to be working with Gatsby.</p>
  <p>I switched to reach router as suggested in another post but that doesnt work. Im looking for another method now that perhaps does not need to use useLocation.</p>
  <p>I kept getting this error when I used react-router-dom:</p>
  <pre><code>Invariant failed: You should not use &lt;Link&gt; outside a &lt;Router&gt;
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Blog() {
    
      const [blogs, setBlogs] = useState([])
      const [image, setImage] = useState()
      const [selectedBlog, setSelectedBlog] = useState(blogs)
  
      useEffect(() =&gt; {
          fetch("http://cdn.contentful.com...")
          .then(response =&gt; response.json())
          .then(data =&gt;
            setBlogs(data.items)
         
          )
        }, []) 
        console.log(blogs)
      return (
          &lt;&gt;
          &lt;div  className="card-flex" &gt;
          {selectedBlog !== null ? blogs.map((blog =&gt;
            &lt;Card title={blog.fields.title}  date={blog.fields.date} introduction={blog.fields.introduction} mainBody1={blog.fields.mainBody1} mainBody2={blog.fields.mainBody2} setSelectedBlog={selectedBlog} 
             /&gt;  
            )): 
               &lt;Article title={blogs.find(d =&gt; d.fields.title === selectedBlog)}   /&gt;
          }
           &lt;/div&gt;
           &lt;/&gt;
        
      ) 
  }
  
  export default Blog</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Blog Card</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Card(props) {
  
    
    console.log(props)
      return (
              
        &lt;div class="container"&gt;
  
        &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
                &lt;img style={{backgroundImage: "url('https://i.pinimg.com/564x/7f/bb/97/7fbb9793b574c32f5d28cae0ea5c557f.jpg')"}}/&gt; 
            &lt;/div&gt;
            &lt;div class="card-body"&gt;
                &lt;span class="tag tag-teal"&gt;{props.tags}&lt;/span&gt;
                &lt;h4&gt;{props.title}&lt;/h4&gt;
               &lt;p style={{fontSize:"17px", paddingTop:"10px"}} &gt;{props.introduction}&lt;/p&gt;
                &lt;div class="card-user"&gt;
                &lt;Link
                to={{
                  pathname: '/article',
                  state: {
                    title: props.title,
                    introduction: props.introduction  
                  }
                }}
              &gt;
                &lt;button&gt;read more&lt;/button&gt;
              &lt;/Link&gt;
                    &lt;div class="user-info"&gt;
                        &lt;h5 &gt;{  props.date}&lt;/h5&gt;
        
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      
  
      )   
  }
  
  export default Card</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Article Page</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
          &lt;div className="main"&gt;   
              &lt;h1 className="title"&gt;{state.title}&lt;/h1&gt;
              &lt;p className="intro"&gt;{state.introduction}&lt;/p&gt;
               &lt;p className="main1"&gt;{state.mainBody1}&lt;/p&gt;
               &lt;p className="main2"&gt;{state.mainBody2}&lt;/p&gt;
          &lt;/div&gt;
      )
  }
  
  export default Article</code></pre>
  </div>
  </div>
  </p>