ReactJSを使ってReact-Router経由でデータを渡すには？

Question

は私が

{ name: "Jessie" } 

...以下のJSONオブジェクトを持っていると私はそれが私のページ上に表示できるように、私のルータを通してそれを渡すことができるようにしたいです。たとえば、これは私のルートページです...

StaticPage.jsx

export default class StaticPage extends React.Component { 
    render() { 
     return (
       <div> 
       <Router history={hashHistory}> 
        <Route path='/' component={Search} /> 
        <Route path='/favorites' component={Favorites} /> 
       </Router> 
       </div> 
     ); 
    } 
} 

だから、検索するためにこのデータを渡し、私は想像すると、このようになります...

<Route path='/' component={Search} name = {this.props.name}/> 

しかし、私はそれを行うときに何もレンダリングされません。私はこれをかなり研究して、私が読んだことから、あなたがルータを通してオブジェクトを渡すことができないことを理解しています。それは非常に奇妙ですbc Routerは従来のReactコンポーネントのように見えますが、そのようには機能しません。回避策の説明は私には明らかではありません。誰も私にこのコードを使った例を教えてもらえますか？私は反応ルータ3.0を使用しています。 4.0で魔法の解決策がないようでしたので、アップグレードする前に頼むと思いました。ありがとう！

Answer 1

<Route>のcomponent小道具だけroute propsとコンポーネントではなく、あなたの供給の小道具をレンダリングするからです。

<Route path="/" render={() => <Search name={this.props.name} />} /> 

またはcomponentで：

あなたが<Route>にrenderまたはcomponent小道具を使用することができますが、明示的にnameを渡し<Search>要素を返す関数を渡すためにルータV4に反応します

<Route path="/" component={() => <Search name={this.props.name} />} /> 

しかし、あなたはrenderを好むべきです、そうでなければたくさんのr emounting。それでもルート小道具を使用することを計画している場合、あなたも行うことができます。

render={routeProps => <Search name={this.props.name} {...routeProps} />} 

私の意見では全く違うアプローチで、1よりエレガントなルートのparamsを使用して、URLから直接名前を渡すことです：

<Route path="/:name" component={Search} /> 

/Bobにアクセスすると、this.props.match.params.nameにアクセスできます。"Bob"が表示されます。

Answer 2

オブジェクトデータをルート経由で直接渡すことはお勧めできません。このように名前やIDなどのパラメータを渡すことをお勧めします。

<Route path='/favorites/:name' component={Favorites} /> 

そして目的地のリクエストから取得します。

これは、重複問題です：Pass object through Link in react router