BrowserRouter
HTML 5が提供するhistory API(pushState,replaceState,popstateイベント)を使用して、UIとURLの同期を維持します.

Basename:stringのすべての場所の基準URL.アプリケーションがサーバのサブディレクトリに配置されている場合は、サブディレクトリに設定する必要があります.basenameの正しいフォーマットは、前に先頭スラッシュがありますが、末尾スラッシュは使用できません.例:

効果:

forceRefresh:boolがtrueの場合、ナビゲーション中にページ全体がリフレッシュされます.一般的には、HTML 5 history APIをサポートしていないブラウザでのみ使用されます.例:

const supportsHistory = 'pushState' in window.history;

getUserConfirmation:funcはナビゲーションを確認するための関数で、デフォルトではwindowを使用します.confirm.たとえば、/aから/bにナビゲートすると、デフォルトのconfirm関数を使用してプロンプトがポップアップされ、ユーザーは「OK」をクリックしてからナビゲートします.そうしないと、処理は行われません.注:一绪に使う必要があります.

//          
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

KeyLength:数値、Locationを設定します.Keyの長さ
URLのhashセクション(window.location.hash)を使用して、UIとURLの同期を維持します.

Basename、getUserConfirmationとBrowserRouterの機能は同じです
hashType: stringwindow.location.hashで使用されるhashタイプは、slash-後ろにスラッシュ、例えば#/と#/sunshine/lollipopsnoslash-後ろにスラッシュがありません.例えば、#と#sunshine/lollipopshbang-Googleスタイルのajax crawlable、例えば#!/と!/sunshine/lollipopsのデフォルトはslashです.
あなたのアプリケーションに宣言的でアクセス可能なナビゲーションリンクを提供します.注意:toプロパティが必要です.そうしないと、ページが間違っています.

this.props.history.push({ pathname:"/inbox", query:{ name:"inbox", myas:"  " } }) 
About

to:string文字列形式のリンクアドレスで、pathname、search、hash属性で作成されます.
to:objectオブジェクト形式のリンクアドレスで、pathname-リンクするパスsearch-クエリーパラメータhash-URLのhash、例えば#the-hashstate-locationに格納された追加状態データ

replace:boolがtrueに設定されている場合、リンクをクリックすると、新しいエントリを追加するのではなく、履歴スタックの現在のエントリが置き換えられます.デフォルトはfalseです.

現在のURLに一致するときに、レンダリング要素にスタイル属性を追加する特別なバージョンです.

About

ActiveClassName:string要素がアクティブなときに適用されるクラスで、デフォルトはactiveです.classNameプロパティとともに使用されます.

FAQs

ActiveStyle:object要素がアクティブなときに適用されるスタイル.

const activeStyle = {
  fontWeight: 'bold',
  color: 'red'
};

FAQs

位置ジャンプの前にユーザに確認情報を与えるために使用されます.アプリケーションがユーザーのナビゲーションを阻止すべき状態に入ると(フォームが半分しか記入されていないなど)、プロンプトがポップアップされます.

import { Prompt } from 'react-router-dom';

Message:stringユーザーが位置を離れようとしたときにポップアップされるプロンプト情報.

Message:funcは、ユーザーが次の場所にナビゲートしようとしたときに呼び出されます.ユーザーにプロンプトを表示する文字列を返すか、trueを返して直接ジャンプを許可する必要があります.

 {
  const isApp = location.pathname.startsWith('/app');

  return isApp ? `       ${location.pathname} ？` : true;
}} />

when:boolアプリケーションでは、コンポーネントを常にレンダリングし、いくつかの条件に基づいてコンポーネントをレンダリングするかどうかを決定するのではなく、when={true}またはwhen={false}を設定することで、対応するナビゲーションをブロックまたは許可できます.注:whenには2つのケースしかありません.値がtrueの場合、プロンプトメッセージがポップアップされます.falseの場合はポップアップされません.

使用すると、新しい場所に移動します.新しい場所は、サーバ側リダイレクト(HTTP 3 xx)など、履歴スタック内の現在のエントリを上書きします.

import { Route, Redirect } from 'react-router-dom';

 (
  loggedIn ? (
    
  ) : (
    
  )
)} />

to:stringがリダイレクトするURL.

to:objectがリダイレクトする場所で、pathnameは理解できる任意の有効なURLパスであってもよい.

例のstateオブジェクトは、リダイレクトするコンポーネントでthisを通過することができる.props.location.stateがアクセスします.
push:boolがtrueの場合、リダイレクトは現在のエントリを置き換えるのではなく、新しい場所を履歴にプッシュします.

exact:boolがtrueの場合、pathでlocationが完全に一致するのみである.pathnameの場合にのみ一致します.

path: string

pathを定義していないものは常に一致します.
render:funcはrenderを使用して、上記で説明した不要なコンポーネントの再ロードを必要とせずに、インラインレンダリングとパッケージを容易に行うことができます.//インラインレンダリングが便利

 
Home
} />

componentは、位置が一致する場合にのみレンダリングされるReactコンポーネントを指定し、route propsをプロパティとして受信します.

const User = ({ match }) => {
  return 
Hello {match.params.username}!
}

children:funcはpathが位置に一致するかどうかにかかわらず、いくつかの内容をレンダリングしたい場合があります.この場合、childrenプロパティを使用できます.一致するかどうかにかかわらず呼び出される以外、その動作原理はrenderと全く同じです.childrenレンダリング方式は、ルートがURLと一致しない限り、componentおよびrender方式と同じroute propsをすべて受信します.一致しない場合、matchはnullになります.これにより、ルーティングが一致するかどうかに応じて、ユーザーインタフェースを動的に調整できます.以下に示すように、ルーティングが一致する場合、アクティブ化クラスを追加します.

const ListItemLink = ({ to, ...rest }) => (
   (
    

      
    
  )} />
)


  
  

これはアニメーションにも役立ちます.

 (
  {/* Animate      ，                        */}
  
    {match && }
  
)} />

警告:と優先されるため、同じ中で複数を同時に使用しないでください.コンポーネント1)pathは各Routeに対してpath属性を定義する必要があり、BrowserRouterを使用する場合、pathはこのRouterが一致するURLのpathnameを記述するために使用される.HashRouterを使用する場合、pathはこのRouteが一致するURLのhashを記述するために使用される.たとえば、BrowserRouterを使用すると、次のようなpathnameのfooで始まるURLが一致します.http://example.com/foo).URLがRouteに一致すると、このRouteで定義されているコンポーネントがレンダリングされます.
2)match URLがRouteと一致すると、Routeはpropsのプロパティとしてレンダリングされたコンポーネントにmatchオブジェクトを作成します.このオブジェクトには、次の4つのプロパティが含まれています.(1)params:Routeのpathはパラメータを含むことができ、例えば(2)isExact:URLが完全に一致する場合、値はtrueである.URL部分が一致するとfalseとなる.例えば、path='/foo'、URL="http://example.com/foo「の場合、完全一致です.URL=」http://example.com/foo/1「の場合、部分マッチングです.(3)path:Routeのpath属性は、ネストされたルーティングを構築する際に使用されます.(4)url:URLのマッチング方法
3)historyオブジェクトhistoryオブジェクトには、通常、length:(number)履歴スタック内のエントリ数action:(string)現在のアクション(PUSH、REPLACEまたはPOP)location:(object)現在位置という属性と方法があります.pathname:URLを持つパスsearch:URLクエリ文字列hash:URLハッシュフラグメントstate:場所固有の状態が、例えば提供される.この位置がスタックに押されるとpush(パス,状態)となる.ブラウザとメモリ履歴でのみ使用できます.Push:(path,[state])-(function)新しいエントリを履歴スタックreplace:(path,[state])-(function)履歴スタック上の現在のエントリgo(n):(function)履歴スタック内のポインタをn個のエントリgoBack():(function)go(-1)goForward():(function)go(1)block:(function)ナビゲーション防止
パスに一致する最初のサブまたはレンダーに使用します.これは一連だけを使うのと何が違いますか?ルートは1つだけレンダリングされます.逆に、一連だけを定義すると、パスに一致するものはすべてレンダリング範囲に含まれます.次のコードを考慮します.

URLが/aboutの場合、およびパスに一致するため、すべてがレンダリングされます.これは、サイドバーやパンくず、ガイドラベルなど、多くの方法でアプリケーションに組み合わせることができるように設計されています.しかし、時には1つだけを選んで表現したいと思っています.例えば、URLが/aboutの場合、/:user(または404ページを表示)に一致したくない場合は、どのように実現すればいいのでしょうか.次のように使用します.

import { Switch, Route } from 'react-router';


  
  
  
  

次に、/aboutパスを検索すると、一致するものを探し始めます.正しく一致すると、一致するアイテムの検索が停止し、すぐに表示されることを知っています.同様に、/michaelパスを使用すると、表示されます.これは、前のレンダリング位置と同じ位置に一致するため、アニメーション変換にも役立ちます.

  
    {/*             */}
    
    
  



  
  
  {/*             ，        ，          */}

location:objectは、現在の履歴位置(通常は現在のブラウザURL)ではなく、サブ要素を一致させるlocationオブジェクトに使用されます.
children:nodeのすべてのサブ要素はまたはであるべきです.現在のパスに一致する最初のサブエレメントのみが表示されます.コンポーネントはpathプロパティを使用してマッチングし、コンポーネントはfromプロパティを使用してマッチングします.pathプロパティがないかfromプロパティがない場合は、常に現在のパスと一致します.に含まれる場合は、path、exact、strictなどの任意のパスマッチングプロパティを使用できます.fromはpathの別名にすぎません.locationプロパティを指定すると、一致するサブ要素のlocationプロパティが上書きされます.

withRouter
履歴オブジェクトのプロパティと最も近い一致には、withRouter上位コンポーネントを使用してアクセスできます.ルーティングが変更されるたびに、ルータはコンポーネントを再レンダリングします.パスは、レンダリングツール:{match,location,history}と同じです.