React Router Dom v4 -- 以前の書き方をまとめておく

what is this

v6 以前の書き方のまとめ。
BrowserRouter as Router,
Switch,
Route,
Link
の使い方

v6 からは大きく異なる。

CRA でプロジェクト作成

[https://reactrouter.com/web/guides/quick-start:embed:cite]

npx create-react-app react-router 

Success! Created react-router at /Users/kaede0902/code/react-router
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

create-react-app で作って

npm start

Compiled successfully!

You can now view react-router in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.61:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

npm start で　React 本体の動作確認

---

react-router-dom を入れる

npm i react-router-dom

added 13 packages, changed 6 packages, and audited 1721 packages in 31s

---

Router, Switch, Route, Link, を import する

App.js で

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

これらを import する

---

App で Route を組む

export default function App() {
  return (
    <Router >
      <li>
        <Link to='/'>Home</Link>
      </li>
      <li>
        <Link to='/about'>About</Link>
      </li>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

App で Router で囲って、最初に 共通部分として Link を置いておく

その下に Switch で

/about の時は <About />

/ の時は <Home />

をスイッチさせる

---

Home と About のコンポーネントを書く

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

Home と About が呼ばれた時に出すものは下に書く。

---

実際に / と /about にアクセスしてみる

これで

/ の時は <Home />

/about の時は <About />

これらの URL と 呼び出される components の切り替えを書ける。

---

まとめ

react-router-dom を使い、URL と Component を対応させるには

<Router >
  <Switch>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/">
      <Home />
    </Route>
  </Switch>
</Router>

このように Router に Switch を仕込んで、
その中に Route で URL の path と、それに対応する コンポーネントを結びつける。

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

これで Route path の URL にアクセスしたときに、これらのコンポーネントが呼び出される。