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

信息页/ 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>

更新url查询时，页面道具不会更新

1 个答案: