[解決済み】react router V4でプログラムによる移動ができるようになりました。

質問

を置き換えたところです。 react-router をv3からv4へ変更しました。

のメンバ関数内をプログラムで移動する方法がよくわかりません。 Component . すなわち handleClick() 関数に移動したい /path/some/where を使用しています。 以前は、以下の方法で行っていました。

import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')

しかし、v4ではそのようなインターフェイスは見当たりません。

v4を使ってナビゲートするにはどうしたらいいですか？

解決方法は？

ブラウザ環境をターゲットにする場合は react-router-dom パッケージの代わりに react-router . 彼らはReactと同じアプローチで、コアを分離するために、( react )とプラットフォーム固有のコード( react-dom , react-native )ですが、微妙な違いとして、2つの別々のパッケージをインストールする必要がなく、環境パッケージには必要なものがすべて含まれています。として、プロジェクトに追加することができます。

yarn add react-router-dom

または

npm i react-router-dom

を用意する必要があります。 <BrowserRouter> をアプリケーションの最上位の親コンポーネントとして使用します。 <BrowserRouter> は、HTML5 の history API を使用して管理するため、インスタンスを作成したり、それを <BrowserRouter> コンポーネントをプロップとして使用します (以前のバージョンではそうする必要がありました)。

V4では、プログラム上でナビゲートするために history オブジェクトがあり、これはReact context がある限りは <BrowserRouter> プロバイダ コンポーネントをアプリケーションの最上位の親として使用します。このライブラリは、コンテキストを通じて router オブジェクトがあり、それ自体には history をプロパティとして使用します。そのため history インターフェースは、次のようないくつかのナビゲーションメソッドを提供します。 push , replace と goBack などがあります。プロパティとメソッドの全リストを確認することができます。 ここで .

Redux/Mobxをご利用の方への重要なお知らせ

アプリケーションの状態管理ライブラリとしてreduxまたはmobxを使用している場合、位置情報を認識するはずのコンポーネントがURL更新のトリガー後に再レンダリングされないという問題に遭遇したことがあるかもしれません。

この現象は react-router パス location をコンテキストモデルを使ってコンポーネントに渡すことができます。

connect と observer の両方は、shouldComponentUpdate メソッドが現在のプロップと次のプロップの浅い比較を行うコンポーネントを作成します。これらのコンポーネントは、少なくとも1つのプロップが変更されたときにのみ、再レンダリングされます。これは、場所が変わったときに確実に更新するために、場所が変わったときに変わるプロップが与えられる必要があることを意味します。

これを解決するためのアプローチは2つあります。

• を折り返します。 接続済み コンポーネントで構成され、パスがない <Route /> . 現在の location オブジェクトが持つプロップの1つです。 <Route> はレンダリングするコンポーネントに渡します。
• をラップします。 接続された コンポーネントを withRouter 高次のコンポーネントは、実際には同じ効果を発揮し location をプロップとして

それはさておき、プログラムによるナビゲーションの方法は、おすすめ順に4つあります。

1.使用方法 <Route> コンポーネント

宣言的なスタイルを促進します。v4以前は <Route /> コンポーネントは、コンポーネント階層の最上位に配置され、事前にルート構造を考える必要がありました。しかし、現在は <Route> コンポーネント どこでも をツリーに追加することで、URL に応じて条件付きでレンダリングするためのより細かい制御を可能にします。 Route を注入します。 match , location と history をプロップとしてコンポーネントに追加します。ナビゲーションメソッド（例えば push , replace , goBack ...) のプロパティとして利用できます。 history オブジェクトを作成します。

でレンダリングする方法は3つあります。 Route のどちらかを使用します。 component , render または children プロップスを使用しますが、同じ Route . この選択はユースケースによりますが、基本的に最初の2つのオプションは、コンポーネントが path がURLの場所に一致するのに対し children を指定すると、パスが場所に一致するかどうかにかかわらず、コンポーネントがレンダリングされます (URL のマッチングに基づいて UI を調整する場合に便利です)。

コンポーネントのレンダリング出力をカスタマイズしたい場合 を使用する必要があります。 render オプションを使用すると、コンポーネントに match , location と history . 説明のための例です。

import { BrowserRouter as Router } from 'react-router-dom'

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

2.使用方法 withRouter HoC

この高次のコンポーネントは、以下のコンポーネントと同じプロップを注入します。 Route . しかし、1つのファイルに1つのHoCしか持てないという制限があります。

import { withRouter } from 'react-router-dom'

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }),
};

export default withRouter(ButtonToNavigate);

3.-使用方法 Redirect コンポーネント

をレンダリングする <Redirect> は新しい場所に移動します。しかし、そのことに留意してください。 デフォルトでは の場合、サーバーサイドリダイレクト（HTTP 3xx）のように、現在の位置が新しいものに置き換えられます。新しいロケーションは to プロップは、文字列（リダイレクト先のURL）または location オブジェクトを作成します。もし、あなたが 新しいエントリを履歴にプッシュする を渡す代わりに push プロパティを設定し、それを true

<Redirect to="/your-new-location" push />

4.- アクセス方法 router コンテキストを通して手動で

という理由で少し落胆。 コンテキスト はまだ実験的な API であり、React の将来のリリースで壊れたり変更されたりする可能性があります。

const ButtonToNavigate = (props, context) => (
  <button
    type="button"
    onClick={() => context.router.history.push('/my-new-location')}
  >
    Navigate to a new location
  </button>
);

ButtonToNavigate.contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  }),
};

もちろん、ブラウザ以外のエコシステムを想定した、次のようなRouterコンポーネントもあります。 <NativeRouter> ナビゲーションスタックを複製する メモリ内 で、React Native プラットフォームをターゲットにしており、以下の方法で利用できます。 react-router-native パッケージで提供されます。

さらに参考にしたい場合は、遠慮なく 公式ドキュメント . また ビデオ このライブラリの共著者の一人が、react-router v4について非常にクールな紹介をしており、主要な変更点のいくつかにハイライトが当てられています。