はこのように私のアプリのページに移動するためにルータを反応させるの使用リンク

Question

イムで小道具を渡し、ルータを反応します。私はこのようなのparams内に沿ってmyProp={this.props.data}渡して試してみました

<MyComponent myProp={this.props.data}/> 

：

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1, myProp={this.props.data}}}>GotoPage!</Link> 

をしかし、のように動作するようには思えないのリンクを使用せずにコンポーネントをレンダリングする場合

私のような何かをするだろうmyPropは新しいページで定義されていますが、私は次のようになります。

Linkでルート以外のパラメータを渡すことはできませんか？

Answer 1

Linkのdocumentationでは、ソースもparamとなります。しかし、私はあなたがしようとしているものを手に入れます。

経路をハードコーディングする代わりに、反応ルータの履歴機能router.push()を使用することをおすすめします。リアクト/ JSXで、...{{singleId: 1, myProp={this.props.data}}}...のようなものが<Link...foobar={{singleId: 1, myProp: this.props.data}}>する必要があり、ちなみに

class Foo extends React.Component { 
    ... 
    const handleNewRoute =() => { 
    let { pageId } = this.props.data 
    let singleId = '1' 
    this.context.router.push({ // use push 
     pathname: `/single/${pageId}`, 
     query: { singleId } 
    }) 
    } 

    render() { 
    return (
     <button onLeftClick={this.handleNewRoute} /> 
    ) 
    } 
} 

：代わりにこのような何かを行います。前者の構文は間違っています。

Answer 2

私は、追加データを取得するより良い方法はajaxだと思います。

これを行うにはLinkのAPIをチェックし、クエリプロパティを見つけます。

query: 

An object of key:value pairs to be stringified. 

ますので、キーのオブジェクト渡すためにこれを使用することができます：次のルートに価値を、しかし、URLは、私はこのためにAJAXを好むthink.Iけれども、このオブジェクトは、文字列化して渡されます。