`反応ルータ`設定を使用しているときに状態をコンポーネントに渡す方法

Question

定義済みの経路設定を使用していますhere。しかし、ルータ構成のこの方法を使用する場合、どのようにコンポーネントに小道具を渡すのですか？ドキュメントから、次の方法を見てみると

は小道具を提供する方法があるようには思えない。

const RouteWithSubRoutes = (route) => (
    <Route path={route.path} render={props => (
    // pass the sub-routes down to keep nesting 
    <route.component {...props} routes={route.routes}/> 
)}/> 
) 

動作しません、次のようなものを行います。小道具は通過しません：

{routes.map((route, i) => (
    <RouteWithSubRoutes key={i} user={this.state.user} {...route}/> 
))} 

私はReactのデフォルト状態管理を使用しています。これに対してReduxが必要ですか？

Answer 1

以下は、Flux + Reactを併用して小道具を渡す方法の例です。これがあなたに役立つことを願っています。他に質問がある場合はお知らせください。

AppComponent.jsあなたAppComponentで

、あなたがレンダリングするために必要なページだけを渡す必要があります。あなたのapp.jsコンポーネントで

render() { 
    <div> 
     <Route path="/login" component={Login} /> 
     <Route exact path= "/:date?" component={Dashboard} /> 
    </div> 
} 

、あなたが必要なすべてのサービス、アクション、およびメインストアコンポーネントをインポートします。値とサービスを簡単に渡すためのbottle.jsのチェックアウトしかし、あなたはちょうどあなたがAppComponment.js内のコンポーネントダッシュボードのような親コンポーネントは、ダッシュボード（とダッシュボードの子コンポーネント）にAppComponentにapp.jsから渡されたデータを取得させてください

ReactDOM.render(
    (
     <BrowserRouter> 
      <Route path="/" AppStore={AppStore} render={props => <AppComponent {...props} AppStore={AppStore} />} /> 
     </BrowserRouter> 
    ), 
    document.getElementById("view-container") 
); 

をレンダリングする必要があります。

AppStoreの場合、これは他のすべてのストアのコンテナと似ています。他のすべてのデータストアコンポーネントとアクションをインポートする必要があります。