React Router DOM中国語文書(二)

8938 ワード
history
本文書の用語historyは、React Routerの2つの主要な依存性の一つであり(React自体を除く)、様々な環境においてJavaScript内のセッション履歴を管理するためのいくつかの異なる実施形態を提供する.
以下の用語はよく使います.
  • browser history-HTML 5 history APIをサポートするためのDOM環境のためのブラウザ
  • hash history-DOM環境に対して、従来型(低バージョン)ブラウザ
    • について
  • memory history−historyは、テストおよびReact Nativeなどの非DOM環境
    • のためのメモリ上の実装である.historyオブジェクトは、通常、以下の属性および方法を有する.
  • length-number履歴スタックにおけるエントリ数
  • action−stringの現在のナビゲーション動作(push、replace、またはpop)
  • location-object現在アクセスされている位置情報は、以下のような属性を持つことができる.
  • pathname−string URL経路
  • search−string URLのクエリー文字列
  • hash−string URLのhashセグメント
  • state-objectはlocationに格納された追加の状態データであり、browser historyおよびmemory historyにおいてのみ有効である.
  • push(path, [state])−functionは、新しいエントリを歴史スタックに押し込む
    • .
  • replace(path, [state])-function置換履歴スタック内の現在のエントリ
  • go(n)−functionは、履歴スタック内のポインタをn個のエントリ
    • に移動させる.
  • goBack()-functionは、go(-1)
    • に相当する前のページに戻ります.
  • goForward()-functionは、go(1)
    • に相当します.
  • block(prompt)-function阻止ナビゲーション(history文書を参照してください)
    • history is muttablehistoryオブジェクトは可変です.したがって、によってコンポーネントをレンダリングするときに受信された属性からlocationに直接アクセスすることを提案する.このようにすると、ライフサイクルにおけるフック関数が正常に実行されることが保証されます.たとえば:
    class Comp extends React.Component {
  componentWillReceiveProps(nextProps) {
    // locationChanged    true
    const locationChanged = nextProps.location !== this.props.location;

    //   ，locationChanged     false，   history     。
    const locationChanged = nextProps.history.location !== this.props.history.location;
  }
}
    あなたが使用している実装によっては、他の属性も存在します.詳細については、historyドキュメントを参照してください.
    locationhistory.locationは、アプリケーションの位置を表しています.現在の位置のように、行き先、または前の位置になります.このように見えます.
    {
  key: 'ac3df4', //    hash history  ，      
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}
    Routerは以下のところでlocationオブジェクトを提供します.
  • は、locationにおいてRoute component方式で
    • を取得する.
  • は、this.props.locationにおいてRoute render方式で
    • を取得する.
  • は、({ location }) => ()においてRoute children方式で
    • を取得する.
  • は、({ location }) => ()においてwithRouter方式で
    • を取得する.this.props.locationオブジェクトは永遠に変更されないので、ライフサイクルフック関数にlocationオブジェクトを使用して、現在のアクセスアドレスが変更されたかどうかを確認することができる.この技法は遠隔データの取得や動画の使用に非常に有用である.
    componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    //      ！
  }
}
    locationは、以下の異なる状況で使用することができる.
  • Web
  • React Native
  • history.push(location)
  • history.replace
    • 通常は文字列を使用するだけですが、アプリケーションが特定の位置に移動するときに使用できるように、追加のlocationを必要とするならば、stateオブジェクトを使用することができます.パスではなくナビゲーション履歴に従ってUIを組織したいなら、これも有用です.
    //           


//            location   
const location = {
  pathname: '/somewhere',
  state: { fromDashboard: true }
};



history.push(location);
history.replace(location);
    最終的に、locationは、以下のコンポーネントに渡す.
  • Route
  • Switch
    • これは彼らがRouter状態で実際の位置を使用するのを阻止します.これはアニメやナビゲーション待ちに非常に役立ちます.またはいつでも実際の位置とは違ったところにレンダリングするようにコンポーネントを誘導したいです.
    match
    一つのlocationオブジェクトは、matchにURLがどのように一致するかに関する情報を含む.以下の属性があります.
  • -objectはparamsで指定されたダイナミックセグメントに基づいて、URLから解析されたキー値ペア
  • path-bollanは、URL全体が一致する場合(付随文字を含まない)、isExact
    • である.
  • true−stringは、マッチングのための経路パターンである.ネストを構築するために使用できるpath
  • −string URLのマッチング部分.ネストを構築するために使用できるurl
    • 以下の場所でオブジェクトにアクセスできます.
  • は、matchにおいてRoute component方式で
    • を取得する.
  • は、this.props.matchにおいてRoute render方式で
    • を取得する.
  • は、({ match }) => ()においてRoute children方式で
    • を取得する.
  • は、({ match }) => ()においてwithRouter方式で
    • を取得する.
  • this.props.matchの戻り値
    • matchPathがを定義していない場合、常に一致するので、最も近い親マッチングが得られる.pathも同じです.
    null matcheswithRouterでは、 ()} />が現在の位置と一致しなくても、pathによって指定されたインライン関数が呼び出される.この場合、childrenはmatchである.不一致のときにもnullを提示できるコンテンツは有用かもしれないが、いくつかの挑戦をもたらす.
    解析URLのデフォルトの方式は、文字列をrelative-pathに接続することである.
    `${match.url}/relative-path`
    match.urlがmatchであるときにこの動作を実行しようとしたら、最終的にnullエラーが発生します.これは、TypeError属性を使用する際に、children内部でrelative-pathの接続を試みることが安全ではないことを意味する.
    空マッチングオブジェクトを生成するの内部でを定義していないpathを使用すると、類似していますが、より微妙な場合があります.
    // location.pathname = '/matches'
 (
  // match === null
   (
    // pathlessMatch === ???
  )} />
)} />
    がないpathは、その親ノードからオブジェクトを継承する.父がmatchと一致すると、そのマッチングもnullとなる.これは、
  • どのサブルーティング／サブリンクも絶対的な
    • でなければなりません.
  • は、nullを規定していないpathであり、その親マッチングはであり得るが、それ自体はnullを使用してコンテンツを提示する必要がある.
    • match Path
    通常のレンダリングサイクルに加えて、childrenによって使用されるのと同じマッチコードを使用してもいいです.例えば、サーバ上で提示される前にデータ依存関係を収集します.
    import { matchPath } from 'react-router';

const match = matchPath('/users/123', {
  path: '/users/:id',
  exact: true,
  strict: false
});
    pathname
    最初のパラメータは適合するパス名です.サーバでNode.jsを利用すればです.
    props
    第2のパラメータは、req.pathによって受け入れられたマッチング属性と同じである.
    {
  path, //    /users/:id
  strict, //   ，    false
  exact //   ，   false
}
    withRouter高次コンポーネントを介して、withRouterオブジェクトの属性と、最も近い(UI構造上の最も近い)historyのオブジェクトにアクセスできます.コンポーネントがレンダリングされると、matchは、更新されたwithRouter、match、locationをそれに渡す.
    import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

//         pathname      
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props;

    return (
      
    You are now at {location.pathname}
    
    );
  }
}

//         Router     （   redux   ）
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
    注意:withRouterは、React Reduxのconnectなど、位置変更を購読しません.位置変更がコンポーネントから伝播された後に再び現れます.これは、親コンポーネントが再提示されない限り、withRouterを使用して経路変換時に再表示されないことを意味する.withRouterを使用して、shoruldComponentUpdateの遮断を防ぐためには、routerパッケージを使用してShuldComponentUpdateのコンポーネントを実現することが重要です.例えば、Reduxを使用する場合:
    // This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))
// or
compose(
  withRouter,
  connect(...)
)(MyComponent)

// This does not
connect(...)(withRouter(MyComponent))
// nor
compose(
  connect(...),
  withRouter
)(MyComponent)
    詳細については、本ガイドを参照してください.
    静的方法と属性
    パッケージのすべての無反応の特定の静的方法と属性は自動的にconnectedコンポーネントにコピーされます.
    Component.Wrapped Component
    包装されたコンポーネントは、試験コンポーネントなどを分離するために使用されることができる、バックコンポーネント上の静的属性historyとして開示される.
    // MyComponent.js
export default withRouter(MyComponent);

// MyComponent.test.js
import MyComponent from './MyComponent';

render();
    wrapped ComponentRef:func
    一つはWrappedComponent属性としてパッケージコンポーネントに伝達される関数である.
    class Container extends React.Component {
  componentDidMount() {
    this.component.doSomething();
  }

  render() {
    return (
       this.component = c} />
    )
  }
}
    なし