ルーティングは次のファイルに書いているものとする。
/, /archives, /settings のパスにアクセスした時に表示されるコンポーネントをそれぞれ、Featured, Archives, Settings になるように設定している。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Featured from "./pages/Featured";
import Archives from "./pages/Archives";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router>
<Layout>
<Route exact path="/" component={Featured}></Route>
<Route exact path="/archives" component={Archives}></Route>
<Route path="/archives/:article" component={Archives}></Route>
</Layout>
</Router>,
app);
<Route exact path="/" component={Featured}></Route>
のみexactがついている。
ここで、exactを設定しない限り、pathが入力したURLに前方一致していれば描画される(つまりlocalhost:3000/以下のすべてのURLに対してが描画されてしまう)
このexact というキーワードが無いと/foo にも/bar にも/archives にもFeatured コンポーネントが表示されることになるので注意すること。
要するにユーザが/archives というパスにアクセスするとFeatured コンポーネントもArchives コンポーネントも表示されるという事態が発生する。