ブラウザ環境をターゲットにしている場合はreact-router-dom、ではなくパッケージを使用する必要がありますreact-router。これらは、コア（react）とプラットフォーム固有のコード（react-dom、react-native）を分離するためにReactが行ったのと同じアプローチに従っており、2つの別個のパッケージをインストールする必要がないため、環境パッケージにはすべてが含まれていますあなたが必要です。次のようにプロジェクトに追加できます。
yarn add react-router-dom
または
npm i react-router-dom
最初に行う必要があるのは<BrowserRouter>、アプリケーションの最上位の親コンポーネントとしてを提供することです。<BrowserRouter>はHTML5 historyAPIを使用して管理します。そのため、自分でインスタンス化して<BrowserRouter>コンポーネントに渡すことを心配する必要はありません（以前のバージョンで必要でした）。
V4では、プログラムでナビゲートするには、アプリケーションの最上位の親としてプロバイダーコンポーネントがある限り、historyReactを介して利用できるオブジェクトにアクセスする必要があります。ライブラリは、それ自体がプロパティとして含むオブジェクトをコンテキストを通じて公開します。インタフェースは、次のようないくつかのナビゲーションメソッドを提供しています、そしてとりわけ、。プロパティとメソッドのリスト全体をここで確認できます。context<BrowserRouter> routerhistoryhistorypushreplacegoBack
Redux / Mobxユーザーへの重要な注意
アプリケーションの状態管理ライブラリとしてreduxまたはmobxを使用している場合、ロケーションを認識する必要があるが、URL更新のトリガー後に再レンダリングされないコンポーネントに問題が発生した可能性があります
これは、コンテキストモデルを使用してコンポーネントにreact-router渡さlocationれるために起こります。
接続とオブザーバーはどちらも、shouldComponentUpdateメソッドが現在の小道具と次の小道具の浅い比較を行うコンポーネントを作成します。これらのコンポーネントは、少なくとも1つのプロップが変更された場合にのみ再レンダリングされます。つまり、場所が変更されたときに確実に更新されるようにするには、場所が変更されたときに変更される小道具を提供する必要があります。
これを解決するための2つのアプローチは次のとおりです。
- 接続されたコンポーネントをパスレスでラップします
<Route />。現在のlocationオブジェクトは<Route>、レンダリングするコンポーネントに渡されるプロップの1つです。
- 接続されたコンポーネントを
withRouter高次コンポーネントでラップします。これは、実際には同じ効果を持ちlocation、プロップとして注入されます
それを別にして、プログラムでナビゲートするには、推奨順に並べられた4つの方法があります。
1.- <Route>コンポーネントの使用
宣言的なスタイルを促進します。v4より前は、
<Route />コンポーネントはコンポーネント階層の最上位に配置されていたため、事前にルート構造を考える必要がありました。ただし、ツリー内の
任意の場所に
<Route>コンポーネントを配置できるようになり、URLに応じて条件付きでレンダリングするためのより細かい制御が可能になります。注入、および、コンポーネントの小道具として。（例えば、ナビゲーションメソッドは、、...）の特性として利用可能であるオブジェクト。
RoutematchlocationhistorypushreplacegoBackhistory
で何かをレンダリングするための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.-使用withRouterHOC
この高次コンポーネントは、と同じ小道具を注入しRouteます。ただし、ファイルごとに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）のように、現在の場所が新しい場所に置き換えられることに注意してください。新しい場所は
toprop によって提供され、文字列（リダイレクト先の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,
}),
};
言うまでもなく、メモリ内の<NativeRouter>ナビゲーションスタックを複製し、パッケージを通じて利用可能なReact Nativeプラットフォームをターゲットにするなど、非ブラウザーエコシステム向けのルーターコンポーネントもあります。react-router-native
詳細については、公式ドキュメントをご覧ください。ライブラリの共著者の1人が作成したビデオがあり、react-router v4のかなりクールな紹介を提供し、いくつかの主要な変更点を強調しています。