ホームページ > 記事 > ウェブフロントエンド > フロントエンドルーティングを実装するためのreact-routerの使用方法の詳細な説明
この記事ではフロントエンドルーティングとreact-routerの使用姿勢の詳細な説明を中心に、react-routerの使い方を詳しく紹介していますので、興味のある方はぜひ学んでみてください
routing
。 SPA 開発の経験がある方 ルーティングという用語は誰にとっても馴染みのないものではありません。フロントエンド ルーティングとバックエンド ルーティングの実装手法は異なりますが、原理は同じです。 HTML5 の履歴 API が登場する前は、フロントエンド ルーティングはハッシュを通じて実装されており、ハッシュは下位バージョンのブラウザと互換性がありました。 URI ルールに # を含める必要があります。 Web サービスはハッシュを解析しません。つまり、# 以降のコンテンツは Web サービスによって自動的に無視されます。ただし、JavaScript はパスを読み取って解析した後、応答できます。さまざまなパスのロジックを処理します。
AngularJs UI-Router の簡単な紹介
AngularJS の開発経験がある場合、Angularjs には正式に実装された独自のルーティング システムがあり、また、比較的代表的なサードパーティのネストされたルーティング メカニズム UI もあります。 -Router; 次のコード ブロックに示すように:
.state("main.list",angularAMD.route({ url : '/list/:params',//url &参数 views : { "header@main" : angularAMD.route({ templateUrl : 'simple/view/main/html/main/Header.html', controller:'HeadController', controllerUrl:[ ****.js ] }), "menu@main" : angularAMD.route({ templateUrl : 'simple/view/main/html/main/MenuModule.html', controller : "MenuController", controllerUrl:[ ****.js] }), "mainContent@main":angularAMD.route({ templateUrl : 'simple/view/main/html/main/MainContent.html' }) } }))
state() 関数の最初のパラメーターは、ページが「main.list」にジャンプするときのネストされたルーティング メカニズムです。 list" ルート ダウンロードの際、状態 ("main"、*) の下のモジュールとリソース (html、js など) が最初にロードされ、次に状態 (") の下のモジュールとリソース (html、js など) がロードされます。 main.list") がルーティングを実装するためにロードされます。ネスト;
react-router
- まずコードの一部
<Router history={ hashHistory }> <Route path='/' component={CoreLayout}> <IndexRoute component={HomeView}/> <Route path=”/HODE_ROUTE/:param“ component={HomeView}/> <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/> <Route path=“/CHART_ROUTE” component={ChartView}/> </Route> </Router>
React-router は、次のような jsx 構文でルーターのネストを実装します。 DOM 構造; AngularJs の UI-Router に似ています 大きな違いはありますが、実際には Angular の実装ロジック:
Jump=》state=》module=》静的リソース (js, css, html)=》show (ページ表示)
react- ルーターの実装ロジック:
Jump=》path=》component=》静的リソース(js, css, html)=》show (ページ表示) この記事では主に、react-router について説明します。以下は、react-router の使用法について簡単に説明します。
<Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>
<App>
<Repos/>
</App>
Routerコンポーネント内にサブルートを記述することもでき、Routerコンポーネントのroutes属性を別途渡すこともできます
let routes = <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route>; <Router routes={routes} history={browserHistory}/>
<Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route>IndexRouteコンポーネント
はindex.htmlに似ており、このコンポーネントはデフォルトでロードされます
<Inbox> <Message/> </Inbox>今、ユーザーがアクセスすると、コンポーネントはデフォルトでロードされます。 /、ロードされたコンポーネントの構造は次のとおりです。
<Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route> </Router>
<App> <Home/> </App>ここで /inbox/messages/5 にアクセスすると、自動的に /messages/5 にジャンプします。
Link
Linkコンポーネントは、aタグを置き換えてリンクを生成するために使用され、ユーザーがクリックすると別のルートにジャンプできるようになります。これは基本的に Router ステータスを受け取る a タグの React バージョンです。
フォーム処理
Linkコンポーネントは通常のユーザーのクリックジャンプに使用されますが、場合によってはフォームジャンプやボタンクリックジャンプなどの操作も必要になります。このような状況を React Router に接続するにはどうすればよいでしょうか?
最初の方法は、browserHistory.pushを使用することです
<Route path="inbox" component={Inbox}> {/* 从 /inbox/messages/:id 跳转到 /messages/:id */} <Redirect from="messages/:id" to="/messages/:id" /> </Route>
handleSubmit(event) { event.preventDefault() const userName = event.target.elements[0].value const repo = event.target.elements[1].value const path = `/repos/${userName}/${repo}` browserHistory.push(path) }2 番目の方法は、コンテキスト オブジェクトを使用することです。
handleSubmit(event) { // ... this.context.router.push(path) },
以上がフロントエンドルーティングを実装するためのreact-routerの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。