// 使用前にグローバルにインストールする
npm install react-router-dom
yarn add react-router-dom

リアクト・ルーター三部作

Router

React-Routerは2つのルーティングモードを提供します。

import {
 // HashRouter as Router
 BrowserRouter as Router, // browserRouterこれは履歴モードである。
 Switch,
 Route,
 Link
} from "react-router-dom";

// ルーターによってナビゲートされる必要のあるルートをラップします。

<Router>
</Router>

Switch and Route

SwitchはJavaScriptの循環判定に似ていて、これも指し示すルートと一致するかどうかの判定が連鎖していきます。

<Switch>
 <Route path="/about">
 <About />
 </Route>
 <Route path="/users">
 <Users />
 </Route>
 <Route path="/">
 <Home />
 </Route>
</Switch>

アプリケーションの周りに宣言的でアクセス可能なナビゲーションを提供します。

属性: 文字列

リンクされた場所の文字列表現は、場所のパス名、検索、ハッシュ属性を連結して作成されます。

<Link to="/about">About</Link>

Linkの特別バージョンで、使い方はLinkに似ています。

要素がアクティブなときに提供されるクラス。デフォルトのクラスは active です。

<Link to="/about" activClassName='selected'>About</Link>