Reactのルーティングについて【react-router-dom】

Reactのルーティングって慣れるまでは難しいけど、慣れればそれほど複雑なものでもなさそう、、、と思ったけど不安なので基本の型はいつでも参照できるようにメモしておきます。

まず基本的な書式は以下。

export const App = () => {
 return (
   <BrowserRouter>
     <Link to="/">Home</Link>
     <br />
     <Link to="/page1">Page1</Link>
     <br />
     <Link to="/page2">Page2</Link>
     
     <Switch>
       <Route exact path="/">
         <Home />
       </Route>
       <Route
         path="/page1"
         render={() => (
           <Switch>
             <Route exact path="/page1">
               <Page1 />
             </Route>
             <Route path="/page1/DetailA">
               <DetailA />
             </Route>
             <Route path="/page1/DetailB">
               <DetailB />
             </Route>
           </Switch>
         )}
       />
       <Route path="/page2">
         <Page2 />
       </Route>
     </Switch>
   </BrowserRouter>
 );
};

最初に読み込まれるルートコンポーネントに対して、BrowserRouterタグで囲めばOK（これで囲まなければルーティング機能が有効に使えません。）

あとは、BrowserRouterの中でLink、Switch、Routeを使い分けるだけで目的のルーティングを実現できます。

Linkはナビゲーションのような役割で、その際に描画するコンポーネントはSwitchとRouteを例のように使用すればOK。RouteタグをSwitchで囲むようにすれば大丈夫です。

その他、LinkのかわりにuseHistoryの方が使い勝手が良い場面もあるので必要に応じて使い分けられるようにしておくと良いかも。。。

以上です。