フロントエンドルーティング&react-router使用ポーズ

ルート?
SPAの開発経験のある人にとって、ルーティングという名詞はよく知られていないが、フロントエンドのルーティングとバックエンドのルーティングは実現技術的に異なるが、原理は同じである.HTML 5のhistory APIが登場するまでは、フロントエンドのルーティングはhashによって実現されており、hashは低バージョンのブラウザと互換性があります.そのURIルールには#が必要です.Webサービスはhashを解析するわけではありません.つまり、#後のコンテンツはWebサービスは自動的に無視されますが、JavaScriptはwindowを通過することができます.location.hashが読み取ったものは,経路を解析した後,異なる経路の論理処理に応答できる.
簡単に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」はネストされたルーティングメカニズムであり、ページが「main.list」ルーティングにジャンプするとstate(「main」*)下のモジュールとそのリソース(html,jsなど)が先にロードされ、state(「main.list」)下のモジュールとリソース(html,jsなど)がロードされ、ルーティングネストが実現される.
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構造に類似する形でrouterネストを実現する.AngularJsのUI-Routerとは大きく異なるように見えますが、実は思想が同じです.
Angularの実装ロジック:
ジャンプ="state="module="静的リソース(js,css,html)="show(ページ表示)
react-routerの実装ロジック:
ジャンプ="path="component="静的リソース(js,css,html)="show(ページ表示)本稿では主にreact-routerについて説明します.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}/>

path属性Routeコンポーネントのpath属性指定ルーティングのマッチングルールは、次の例

を参照してください.

<Route path="inbox" component={Inbox}>
   <Route path="messages/:id" component={Message} />
Route>

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

<Inbox>
  <Message/>
Inbox>

IndexRouteコンポーネントはindexに類似する.html、デフォルトロードコンポーネント、次のコードデフォルトロードhomeコンポーネント

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  Route>
Router>

現在、ユーザーがアクセス/するときにロードされるコンポーネント構造は以下の通りです.

<App>
  <Home/>
App>

RedirectコンポーネントRedirectコンポーネントルーティングのためのジャンプ、すなわち、ユーザが1つのルーティングにアクセスすると、自動的に別のルーティングにジャンプします.

"inbox" component={Inbox}>
  {/*   /inbox/messages/:id     /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />

/inbox/messages/5にアクセスすると、/messages/5に自動的にジャンプします.

Link

Linkコンポーネントは、aラベルの代わりにリンクを生成し、ユーザーがクリックして別のルーティングにジャンプできるようにします.基本的にはaラベルのReactバージョンであり、Routerの状態を受信することができます.

フォーム処理

Linkコンポーネントは、通常のユーザーがジャンプをクリックするのに使用されますが、フォームのジャンプ、ボタンをクリックしてジャンプするなどの操作が必要な場合があります.これらの状況はどのようにReact Routerとドッキングしますか?###1つ目の方法はbrowserHistoryを使用することです.push

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

${userName}バックエンド言語でよく使用される式の書き方で、文字列から変数を取得できます.

 handleSubmit(event) {
    // ...
    this.context.router.push(path)
  },

2つ目の方法はcontextオブジェクトを使用することです.

export default React.createClass({

  // ask for `router` from context
  contextTypes: {
    router: React.PropTypes.object
  },

  handleSubmit(event) {
    // ...
    this.context.router.push(path)
  },
})

複数の人が協力してrouterファイル管理を開発しますか??
一般的に、プロジェクトには、routerプール、異なるリクエスト、routerプールで一致するパスをリクエストし、リクエストに必要なページをロードする統一されたrouterファイルがあります.but ... 各開発者がコンポーネントを開発するには、ルーティングを構成する必要があります.routerファイルの管理が難しくなり、衝突や障害を引き起こしやすくなります.so..,もしかすると、各コンポーネントフォルダの下に1つのXXXがあるかもしれない.routerファイルは、フロントエンドコードパッケージが線上にアップロードされたときにフック関数をトリガーし、XXX.routerファイルは中央routerファイルに統合され、複数の人がrouterファイルを操作しないようにします.