プログラムでReact Router V4を使用してナビゲートする 質問する

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

yarn add react-router-dom

または

npm i react-router-dom

最初に行う必要があるのは、<BrowserRouter>アプリケーションの最上位の親コンポーネントとして を提供することです。は<BrowserRouter>HTML5 historyAPI を使用して を管理するので、自分でインスタンス化してコンポーネントにプロパティとして渡す必要はありません<BrowserRouter>(以前のバージョンではそうする必要がありました)。

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

Redux/Mobx ユーザーへの重要な注意

これは、コンテキスト モデルを使用してコンポーネントにreact-router渡されるために発生します。location

connect と observer はどちらも、shouldComponentUpdate メソッドが現在のプロパティと次のプロパティの浅い比較を実行するコンポーネントを作成します。これらのコンポーネントは、少なくとも 1 つのプロパティが変更された場合にのみ再レンダリングされます。つまり、場所が変わったときにコンポーネントが更新されるようにするには、場所が変わったときに変更されるプロパティをコンポーネントに指定する必要があります。

これを解決するための 2 つのアプローチは次のとおりです。

• 接続されたコンポーネントをパスのない でラップします<Route />。現在のオブジェクトは、 がレンダリングするコンポーネントに渡すlocationプロパティの1つです。<Route>
• 接続されたコンポーネントを高階コンポーネントでラップしますwithRouter。これは実際には同じ効果を持ち、locationプロパティとして注入されます。

それはさておき、プログラムでナビゲートする方法は 4 つあり、推奨順に並べると次のようになります。

1.-<Route>コンポーネントの使用

を使用して何かをレンダリングする方法は 3 つあります。、、またはprops のRouteいずれかを使用しますが、同じ で複数の方法を使用しないでください。選択はユースケースによって異なりますが、基本的に最初の 2 つのオプションでは、 がURL の場所と一致する場合にのみコンポーネントがレンダリングされます。一方、 では、パスが場所と一致するかどうかに関係なくコンポーネントがレンダリングされます (URL の一致に基づいて UI を調整する場合に便利です)。componentrenderchildrenRoutepathchildren

コンポーネントのレンダリング出力をカスタマイズする場合は、コンポーネントを関数でラップし、オプションを使用して、、および以外の必要なプロパティをコンポーネントに渡す必要があります。説明renderのための例:matchlocationhistory

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

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

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

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