[解決済み] Reactルータを使ったプログラムによるナビゲーション

質問

と react-router を使うことができるんです。 Link 要素で、reactルータがネイティブに処理するリンクを作成します。

内部的には this.context.transitionTo(...) .

ナビゲーションを行いたい。リンクからではなく、ドロップダウンの選択からです（例として）。コードでこれを行うにはどうしたらよいでしょうか？どのようなものですか？ this.context ?

を見た。 Navigation のミキシンを使っていますが、これは mixins ?

解決方法は？

React Router v5.1.0とフックについて

新しい useHistory React Router >5.1.0 で、React >16.8.0 と機能コンポーネントを使用している場合、フックを使用することができます。

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

React Router v4

React Routerのv4では、コンポーネント内でプログラムによるルーティングを行うために、3つのアプローチがあります。

1. を使用します。 withRouter 高次のコンポーネント。
2. コンポジションを使用し、レンダリング <Route>
3. を使用します。 context .

React Routerは、そのほとんどが history ライブラリを使用します。 history は、ブラウザの window.history ブラウザ履歴とハッシュ履歴を使用します。また、グローバル履歴を持たない環境では、メモリ履歴を提供することも可能です。これは特にモバイルアプリの開発で有用です ( react-native )やNodeによるユニットテストなど、様々な場面で活用できます。

A history インスタンスには、ナビゲーションのための2つのメソッドがあります。 push と replace . を思い浮かべると history は、訪問した場所の配列として push は新しい場所を配列に追加し replace は、配列内の現在の位置を新しいものに置き換えます。一般的には push メソッドは、ナビゲートするときに使用します。

以前のバージョンのReact Routerでは、自分で history インスタンスを作成することができます。 <BrowserRouter> , <HashRouter> および <MemoryRouter> コンポーネントは、ブラウザ、ハッシュ、およびメモリのインスタンスを作成してくれます。React Routerは、そのプロパティとメソッドを history インスタンスは、コンテキストを通して利用できます。 router オブジェクトを作成します。

1. を使用します。 withRouter 高次コンポーネント

は withRouter 高次のコンポーネントは history オブジェクトをコンポーネントのプロップとして使用します。これによって push と replace メソッドを処理することなく context .

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

2. コンポジションを使用し、レンダリング <Route>

は <Route> コンポーネントは、位置のマッチングのためだけではありません。道なき道をレンダリングし 常に現在地と一致します。 . その <Route> コンポーネントと同じプロップを渡します。 withRouter にアクセスできるようになるので history メソッドを通じて history プロパティを使用します。

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

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

3. 文脈を利用する*。

しかし、おそらくはそうではないはずです。

最後のオプションは、Reactの コンテキスト モデルを使用します (React の Context API は v16 で安定しています)。

const Button = (props, context) => (
  <button
    type='button'
    onClick={() => {
      // context.history.push === history.push
      context.history.push('/new-location')
    }}
  >
    Click Me!
  </button>
)

// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

1と2は実装が最も簡単なので、ほとんどのユースケースで最適な選択です。