gatsby - 当 url 查询更新时，页面 props 不会更新

Question

我使用的是 Gatsby 1.4.0

我希望网站上有多个链接到同一页面但具有不同搜索查询的按钮。例如，虚拟页面中有 2 个按钮。:

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

我想使用“gatsby-link”将用户路由到新路径，这样页面就不会刷新。

问题

导航后，我的布局文件按预期重新呈现，但我的页面文件未重新呈现。仅当我重新加载页面时，正确的查询才会传递到我的页面文件。

layout/index.js 文件(简化):

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>
    )
  }
}

<小时/>

有没有办法在查询更新时强制页面重新渲染？

Answer 1

可以跳过链接中的最后一个/，因此它是:

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