4

私はGatsby 1.4.0を使用しています

同じページにリンクしているが、検索クエリが異なる複数のボタンを Web サイトに配置したいと考えています。たとえば、ダミー ページの 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>
    )
  }
}

クエリが更新されたときにページを強制的に再レン​​ダリングする方法はありますか?

4

1 に答える 1

0

リンクの最後の / をスキップするとうまくいくので、次のようになります。

<Link to="/test?name=john">John</Link>
<Link to="/test?name=peter">Peter</Link>
于 2017-09-07T19:03:30.560 に答える