1.1基本的な使い方
、唯一のメインページをロードする必要が1パーシャルリフレッシュによって、あなたはジャンプやスイッチのページを達成することができます：単一のページだった機能
長所：高速化をロードし、ユーザーエクスペリエンスが優れています
短所：
-あなたは少し遅く、従来のよりロード初めて
不利なSEO -
-ページ比較的複雑な
-リターンキー
1.2インストールが反応し、ルータ-DOM
cnpmがインストール反応ルータ-DOM
本番環境に依存してダウンロードしてください。
オブジェクトを解体することによって内蔵モジュールの `反応ルータ-dom`方法を取得するアセンブリでは、アセンブリに、必要に応じて導入された内部構成要素は、ページで使用すること。
- HashRouterだけうまくHashRouter一度使用する必要があり、ルートコンテナのルート、HashRouterの内部に包まれなければ、ルーティングに関連するすべてのものの将来、およびWebサイトを表し;
-ルートは、ルート上のルーティングルールを表し、そこにありますより重要な属性の2、パス、コンポーネント
-リンクは連結ルートを表し
サンプルコード
時間/> </ div>
</ HashRouter>
）;
}
HashRouterを使用してAPPのルート構成要素を包んすると、サイトがルーティング有効になっている、とHashRouterで、あなただけの唯一のルート要素を持つことができます。Webサイトでは、あなただけがライン上で `唯一の` <HashRouter> </ HashRouter>を使用する必要があります。
ルーティング一致する経路を表す経路ラベル作成、ルーティングルールは、コンポーネントが表示するコンポーネントを表します。ルートは、2人のアイデンティティを持っている：1これは、ルートマッチング規則であり、2はこの整合位置に置かれるべき将来のアセンブリを示すためのプレースホルダです。
要注意
-ルートアドレスは、パスコンポーネント/始め、コンポーネントの構成プロパティは、ディスプレイの構成要素である、このプロパティは大文字でないかもしれないです
-ルート・コンポーネントは、単一ラベルのニーズを終了/シングルまたはダブルラベルを使用することができ、二重のタグが何か他のものの途中で書き込むことができません
-ページのレンダリングでプロパティへのアドレスリンク/開始され、リンクがラベルです
2.1、伝統的な値をルーティング
リンクでのconfigureのアドレスをルーティング、ジャンプ
-パス/後ろのルートパス：ID（キー）
-パスリンク/トップ/ 10（値）に戻って
値を受け渡します。
-クラスのクラスコンポーネント、this.props.match.paramsプロパティ名。
-機能コンポーネント：属性名パラメータ.match.params
サンプルコード
（）{レンダリング
リターン（
<HashRouter>
の<div>
<H1>这是网站的根目录</ H1>
<HR />
<= "/映画/トップ/ 10"へのリンク>电影</リンク>
<HR / >
<ルートパス= "/映画/：タイプ/：ID"成分= {映画}正確> </ルート>
</ div>
</ HashRouter>
）。
}
ルートは組み込みコンポーネント、アドレスパス構成：
<ルートパス= "/映画/：タイプ/：ID" 成分= {映画}正確> </ルート>
リンクは、内蔵モジュール、属性、ジャンプするように設定します：
<= "/映画/トップ/ 10" へのリンク>电影</リンク>
クラスコンポーネントは、ライフサイクルにわたって経路を介して送信されるデータを搬送this.props受信されます。
（）{レンダリング
はconsole.log（この）;
リターン
（<DIV>
电影- {this.props.match.params.type} - {this.props.match.params.id}
</ div>
）。
}
コードの最適化後：
クラスムービーReact.Component {延び
{コンストラクタ（小道具）
）（スーパー。
this.state = {
routeParams：props.match.params
}
}
（）{レンダリング
はconsole.log（この）;
リターン（
<DIV>
电影- {this.state.routeParams.type} - {this.state.routeParams.id}
</ div>
）。
}
}
オーバー透過成分受信したパラメータ値を形成することによって機能は小道具がそれに渡されたルーティングデータを運ぶオブジェクト上を通過する、コンポーネントアセンブリルーティングの関数として、パラメータ小道具
インポートは'反応'からリアクト
輸出のデフォルト機能ホーム（小道具）{
リターン（
の<div>
{props.match.params.id}
</ DIV>
）
}
2.2ネストされたルーティング
ネストされたルート：ルーティングコンポーネントは、リンク、ルートは、スイッチング、ジャンプを達成するために、サブ経路を設定します。
以下は、ルーティングコンポーネントホームルート経路であります
<ルートパス= "/ホーム" コンポーネント= {ホーム}> </ルート>
リンクを使用し続ける、ルートホームルーティングコンポーネントにネスト、ルーティングアドレスは、注目すべきである2つのルーティング経路のうちの対応するものに続くルーティングアドレスの前部、
レンダリング（）{
リターン（
の<div>
<UL>
<LI> <=へのリンクを"/ホーム/">推荐</リンク> </ LI>
<LI> <=へのリンク"/ホーム/ B">新时代する</ link> </ LI>
<LI> <=へのリンク"/ホーム/ C">动漫する</ link> </ LI>
</ UL>
<ルートパス= "/ホーム/"成分= {A }> </ルート>
<ルートパス= "/ホーム/ B"成分= {B}> </ルート>
<ルートパス= "/ホーム/ C"成分= {C}> </ルート>
</ div>
）
}
2.3は、JSはジャンプをルーティング達成します
導入BrowserRouterモジュール
インポート{BrowserRouter、HashRouter、国道、リンク}反応ルータ-DOM」から
ルートコンテナのBrowserRouterとして使用します
ジャンプ（）{
window.location.href = "/ニュース"
}
（レンダリング）{
リターン（
<BrowserRouter>
の<div>
<H1>这是网站的根目录</ H1>
<HR />
<ボタンのonClick = {（ ）=> {this.jump（）}}>新闻</ボタン>
<HR />
<ルートパス= "/ニュース"成分= {ニュース}> </ルート>
</ div>
</ BrowserRouter>
）。
}
レンダリング方法において、、、ボタンの名前は、JSがルーティングジャンプボタンを書き込むのonClickメソッドを定義し、関数への矢印ポイントは、この問題を解決し、同じレベル、ジャンプ方法の定義、ジャンプをルーティングするためのコードジャンプ方法の実装をレンダリングしますジャンプをルーティングするためのwindow.location.href =「ルーティング可能なアドレス」を使用して。
図3は、内部コンポーネントルータ-DOMを反応します
まず、オンデマンドで導入、内蔵のものを部品、導入する必要があります
'反応ルータ-DOM' からインポート{BrowserRouter、リンク、ルート、リダイレクト、NavLink、スイッチ}
アセンブリNavLinkで使用される3.1、
ルートがアクティブな場合NavLinkは、チェックactiveClassNameで、ディスプレイはクラススタイルを起動します。
私たちの前に例に基づき、リンク・コンポーネントを見つけるために、我々は、リンク・コンポーネントの役割は、プロパティへの経由でルーティングジャンプ、ジャンプ、対応するパスのアドレスを指定することができます学びました。
`` `HTML //
<UL>
<LI>
<=へのリンク"/ホーム">首页</リンク>
</ LI>
<LI>
<=へのリンク"/ビデオ">好看视频</リンク>
</ LI>
</ UL>
リンクコンポーネントは、すべてのコンポーネントを交換しNavLink
`` HTML // <LI> <NavLink activeClassName = = "/ホーム"に"赤">首页</ NavLink> </ LI> <LI> <NavLink activeClassName = "赤" = "/ビデオ"へ>好看视频</ NavLink> </ LI> `` `
私たちは、なぜNavLinkをカプセル化し、使用NavLinkは何だ、あなたが適切NavLinkへのジャンプをルーティングすることができる前に、また、まだ実績のあるコンポーネントがNavLinkも達成することができますジャンプする必要が使用正常にジャンプすることができ、その後、問題があることがわかります各NavLinkはときにトリガー、スイッチング効果があるように、対応するパターンをトリガーするクラスのactiveClassNameスタイルNavLinkケースの結合性を追加しました。
3.2、コンポーネントリダイレクトに組み込みコンポーネントを使用して
redirect属性に提供リダイレクト、あなたは指定されたルートに直接ジャンプすることができます。
得られたもののアドレスが続くレンダリング方法、タグが実行するように構築されている場合、内蔵コンポーネント、リダイレクトプロパティは内蔵で使用する成分、ジャンプするようにルーティングされる、の各ルーティングコンポーネントに適合させることができます。
`` `HTML // <リダイレクト= "/ホーム/ C"へ> </リダイレクト>
組み込みコンポーネントアセンブリスイッチを使用して3.3、
スイッチの排他的
アセンブリパッケージのラベルに使用されるスイッチのすべての利用可能なルート、このとき、各パスに対応しているルートの正確な一致、それぞれの構成要素を示す、最後のルートポイントがときにリンクが存在しない場合、パスは、ルーティングアドレスを持っていないですアドレスは、アドレスへの正確な一致がない場合、それはC404へのルートを表示する、スイッチは一致するコンポーネントが表示されます。
`` HTML //
<スイッチ>
<ルート・パス= "/ホーム"コンポーネント= {HOME}> </ルート>
<ルートパス= "/ビデオ"コンポーネント= {HOME1}> </ルート>
<ルートパス= "/本」コンポーネント= {ホーム2}> </ルート>
<ルートパス= "/ renwu"成分= {HOME3}> </ルート>
<ルートパス= "/ユーザ"成分= {Home4}> </ルート>
<ルート成分= {C404}> </ルート>
</スイッチ>
`` `