0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Reactメモ ルーティングの設定 *個人メモ用

Posted at

Reactの勉強をしている私の個人メモなので、
記事としてはわかりづらくなっています。
FBは歓迎しておりますが、温かい目で見守って頂けると幸いです。

#react-routerとreact-router-domの違い
とりあえずreact-router-domを使えばOK

#基本的な遷移

sample.jsx
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";

    <BrowserRouter>
      <div className="App">
        <Link to="/">HOME</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </BrowserRouter>

①全てをBrowserRouterで囲む
②Linkで遷移させるためのボタンやlinkを作る
③遷移先をSwitchで囲む
④RouteのpathにLinkのパスを指定
⑤Routeで指定したパスに合う遷移先を囲む
⑥遷移先の元にはexactを指定

#ネストされた遷移先

sample.jsx
        <Route
          path="/"
          render={({ match: { url } }) => (
            <Switch>
              <Route exact path={url}>
                <Home />
              </Route>
              <Route path={`${url}/sample1`}>
                <HomeSample1 />
              </Route>
              <Route path={`${url}/sample2`}>
                <HomeSample2 />
              </Route>
            </Switch>
          )}
        ></Route>

①1つのRouteの中でrenderを行う
②render内で同じことを行う
③確実にネストされた場所を指定するため
renderは関数を受け取りデフォルトの引数でpropsを持っているので
その中のmatchの中のurlを引数に指定

以上

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?