2017-11-12 35 views
1

私のアプリケーションエントリーポイントをグローバルステートストアとして使用したい。子どもたちに小道具として情報を伝える。反応ルータ4コンポーネントに小道具を渡すには?

反応ルータ4を使用すると、どのようにしてプロップデータをレンダリングされたコンポーネントに送信できますか。これと同様の方法で:

<Route Path=“/someplace” component={someComponent} extra-prop-data={dataPassedToSomeComponent} /> 

私は廃止されるように見える反応し、ルーターの古いバージョンのためのいくつかのjankyの回避策を見てきました。

v4でこれを行う正しい方法は何ですか?

+1

可能重複[ルータ反応 - 渡す小道具コンポーネントをハンドラに(https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) –

+0

私が見それです。しかし、私の小道具はルートを定義するコンポーネントの状態から来る必要があるので、例外的な答えは機能しません。ラッパーコンポーネントをRoutesComponentの範囲外に定義することは役に立ちません。多分私はそこに何かを逃していますか? –

+1

https://stackoverflow.com/a/43299633/2902821あなたのケースに合っていませんか? –

答えて

5

コンポーネントをコンポーネントのpropに直接渡すのではなく、関数をレンダリングのpropに渡すことができます。

<Route path="/someplace" render={() => <SomeComponent props={} />} /> 

hereを読むことができます。

EDIT:実際にはrender小道具を使用する必要はありません。あなたもcomponent小道具と同じ操作を行うことができます。

<Route path="/someplace" component={() => <SomeComponent props={} />} /> 
+0

はい!今私は別のプロジェクトでこれを行うことを覚えています。私が家に帰ると、それを渦巻きにします。 Thanks –

+1

@Raj [docs](https://reacttraining.com/react-router/web/api/Route/render-func)への参照を追加することを検討してください –

+1

が参照を追加しました! – Raj

0

そして、あなたはあなたがそれらを含める必要があるコンポーネントへのルーティング・プロパティにアクセスしたい場合は、上記の回答に追加します。ルータが "SomeComponent"をアクティブにすると、コンポーネントはすべてのルーティング・プロップと余分なパラメータ(この例では "param")を取得します。

<Route path='/someplace' component={(props) => <SomeComponent param="yo" {...props}/>} /> 
関連する問題