ネストされたルートルータ-DOMを反応させます

ルーティングの設定

「が反応」からの輸入が反応します。
以下からの輸入ReactDOM「-DOMを反応させます」。
// 「./view/App」からインポートするアプリケーション。
インポート」./utils/common.scss' ; 
以下からの輸入{リンク、ルート、BrowserRouter}「反応-ルータ-DOM」
からのインポートホーム「./view/home/home」
からの輸入の詳細「./view/detail/detail」
からインポート人」./view/person/人
からの輸入DetailChild ./view/detail/detailChild/detailChild '' 
からの輸入DetailChildOne ./view/detail/detailChildOne/detailChildOne」' 
 
アプリケーションのconst = （
     <BrowserRouter>
            <= "/ホーム"へのリンク> <LI>首页</リンク> </ LI> 
            <= "/ディテール"へのリンク> <LI>详情页</リンク> </ LI> 
            <LI> <リンクへ= "/人間">个人中心</ link>を</ LI> 
        </ UL> 
        <DIV> 
            <ルート正確なパス= "/ホーム"コンポーネント= {HOME} /> 
            <ルートパス= "/詳細"（{=レンダリング）=> 
                <詳細> 
                    <ルート正確なパス= "/詳細"成分= {DetailChild} /> 
                    <ルートパス= "/ディテール/ DetailChildOne"コンポーネント= {DetailChildOne} /> 
                </詳細> 
            } />
            <ルートの正確なパス= "/人"成分= {人} /> 
        </ div> 
    </ BrowserRouter> ）

 
ReactDOM.render（アプリケーション、のdocument.getElementById（ 'ルート' ））;

　　設定ファイル、前記入口非BrowserRouterハッシュルートモードではない＃と後URLルーティング、ルートが各ルートに対応する正確な主成分であり、パス、コンポーネント、これらの特性を描画、経路は主にネストするために使用されプロパティは、プロパティをレンダリングすることです。ネストされたルートが書かれた対応する属性、親ルーティングと最も外側のラップをレンダリングします。
　　注意！！！{}関数の矢印を描画しないで

ページのネストされたルーティング

インポートは、 '反応'から、{コンポーネント}を反応させ
、インポート」./detail.scss' 
からインポート{withRouter、リンク} '反応ルータ-DOM' 
 
クラスの詳細は、コンポーネント{延び
    レンダリング（）{ 
        リターン（
             <DIV> 
                詳細页面
                 <リンク= "/詳細">嵌套路由1 </リンク>に
                <リンクへ= "/ディテール/ DetailChildOne">嵌套路由2 </ link>を
                { これは.props.children}
             </ div>
        ）
    } 
} 
エクスポート既定 withRouter（詳細）

　　ページでは、このようなネストされたルートがここに表示されます巣ネストされた一緒に{} this.props.childrenに必要にルーティングされます。
　　注エクスポートデフォルトwithRouter（詳細）withRouterは、このような方法は、それ以外のコンポーネントは、このメソッドのthis.props.children.history（パス名をthis.props.children.historyされていませんJSでコンポーネントにバインドすることはできません使用する必要があります。「/詳細「）ジャンプ

結果

ネストされたルートルータ-DOMを反応させます

おすすめ