Page props do not update when url query is updated

Question

I am using Gatsby 1.4.0

I would like to have multiple buttons on a website that link to the same page, but with a different search query. For example, 2 buttons in a dummy page.:

Link A -> Routes to '/test/?name=john
Link B -> Routes to '/test/?name=peter

I would like to use from 'gatsby-link' to route a user to a new path so the page does not refresh.

Problem

Upon navigation, my layout file is re-rendered as expected, but my page file is not re-rendered. Only if I reload the page does the correct query get passed down to my page file.

layout/index.js file (simplified):

render() {
    console.log(this.props.location.search) // Correct query every time navigation occurs
    return (
      <div>
        {this.props.children()}
        <Footer />
      </div>
    )
  },

pages/test.js

import React from 'react'
import Link from 'gatsby-link'

export default class Dummy extends React.Component {

  render() {
    console.log(this.props.location.search) // Does not re-render on navigation.

    return (
      <div>
        <Link to="/test/?name=john">John</Link>
        <Link to="/test/?name=peter">Peter</Link>
      </div>
    )
  }
}

---

Is there a way to force the page to re-render when the query is updated?

Answer 1

It would work to skip the last / in the Link, so it would be:

<Link to="/test?name=john">John</Link>
<Link to="/test?name=peter">Peter</Link>