フロントエンドルーティングを実装するための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=&#39;/&#39; 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>

上記のコードでは、ユーザーが /repos にアクセスすると、最初に App コンポーネントがロードされ、次にその中で Repos コンポーネントがロードされます。

<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}/>

上記のコードでは、ユーザーが/inbox/messages/:id にアクセスすると、次のコンポーネントがロードされます。

<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>

${userName}は、バックエンド言語で一般的に使用される式記述方法であり、文字列内の変数を取得できます

 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)
 },

ルーターファイル管理の複数人による共同開発

一般に、プロジェクトには、ルータープールに相当する統合ルーターファイルが含まれます。さまざまなリクエストがルーター内の一致するパスを要求します。要求されたページをロードします。しかし。 。 。 コンポーネントを開発するすべての開発者はルーティングを構成する必要があるため、ルーター ファイルの管理が難しくなり、競合や障害が発生しやすくなります。それで。 。おそらく、各コンポーネント フォルダーに XXX.router ファイルを置き、フロントエンド コードがパッケージ化されてオンラインにアップロードされるときにフック関数をトリガーし、多重接続を避けるために XXX.router ファイルを中央のルーター ファイルにマージすることが可能です。人の操作ルーター ファイル。

以上がフロントエンドルーティングを実装するためのreact-routerの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。