React routerで表示を切り替える(Navで選択した内容をメインエリアに表示する)

PHOTO EMBED

Sun May 16 2021 08:59:25 GMT+0000 (Coordinated Universal Time)

Saved by @misho #react.js #javascript

react-routerの使いかたを学ぶ。
参考にしたサイトはhttps://dezanari.com/react-react-router/

1. まず、react-create-appで土台を作成。

2. react-router-domをインストール(react-create-appだといらない?!)
```
yarn add react-router-dom
```
3. 
(例えば)App.jsで、
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'; 
と、インポートしておいて、

Linkで飛ぶ先はコンポーネントとして作成し、このファイルにインポートする。
import PageA from '../PageA/PageA';
import PageB from '../PageB/PageB';

そして、切り替えを以下のように設定。

```
<BrowserRouter>         /* 全体をBrowserRouterで囲む。*/

    <div className="wrapper"> 

      <div className="nav">             
        <h1>Do you like A or B???</h1>
        <Link to="/pageA">PageA</Link><br/>  /*Linkでアンカーと同じものを作れる。*/
        <Link to="/pageB">PageB</Link>
      </div>
    
      <div className="main">
        <Switch>                    /* Switchで囲んだ中には、、、*/
          <Route path="/pageA" component={PageA}/>  /* RouteでLinkで飛ぶ先を設定。*/
          <Route path="/pageB" component={PageB}/>  
        </Switch>    
      </div>
    
    </div>

    </BrowserRouter>
```
content_copyCOPY

ECサイトやブログなどに使える! ナビゲーションは残しつつ、メインエリアの表示を切り替える方法。

参考にしたサイトはhttps://dezanari.com/react-react-router/