Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@gcyagyu

React Router v4で任意のid情報を送る方法

概要

コロコロとバージョンが変わるReact Router。
今回は現在最新バージョンであるreact-router-dom@4.2.2を使ってみたのでメモに残します。

詳細
https://reacttraining.com/react-router/
https://www.npmjs.com/package/react-router-dom

まだreact-router-domを入れていない人は下記コマンドを実行してください。

yarn add react-router-dom

今回はRailsなどのWebアプリケーションでよく使う、URLに任意のid情報を送る方法を紹介します。
Railsでおなじみの

/users/:id: 

のような書き方をReact Routerで表現して見ました。
とりあえずサンプルコードを載せます。

サンプルの動き
https://gyazo.com/c99338a35c7bad25d3f15fe7214a3a5b

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

const flowers = [
  {id: 1, name: "ひまわり"},
  {id: 2, name: "たんぽぽ"},
  {id: 3, name: "バラ"}
]

const App = () => (
  <Router>
    <div>
      <Switch>
        <Route
          exact path="/"
          component={FlowerLists} 
      />
        <Route
          path='/flower/:id'
          component={OneFlower} 
        />
        <Route
          component={NoContents} 
        />
      </Switch>
    </div>
  </Router>
);

const NoContents = () => (
  <div>No Contents!!</div>
)

const FlowerLists = () => {
  const flowerLists = flowers.map(e => (
    <li key={e.id}>
      <Link to={'/flower/' + e.id}>{e.name}</Link>
    </li>
  ));
  return (
    <ul>
      {flowerLists}
      <Link to={'/nocontents'}>No contents</Link>
    </ul>
  )
};

class OneFlower extends React.Component {
  render() {
    (① console.log(this.props))
    const params = this.props.match
    const id = parseInt(params.params.id, 10)
    const flower = flowers.filter(e => e.id === id)[0]
  return (
      <div>{id}: {flower.name} </div>
    )
  }
}

export default App;

Route、Link、Switchについて見ていきます。

Routeについて

<Route
    exact path="/"
    component={FlowerLists} />

まずはexactの説明

exact path="/" ・・・ pathが完全に"/"の時にFlowerListsコンポーネントを表示する。(完全一致)
path="/" ・・・ pathの先頭が"/"だったらFlowerListsコンポーネントを表示する。(前方一致)

このように、もしもexactがないと、/で始まる全てのpathでFlowerListsコンポーネントが表示されてしまいます。
exactは忘れないようにしましょう。

そして、今回はRouteコンポーネントを用いて、以下のように各flowerのidを渡しました。

<Route
    path='/flower/:id'
    component={OneFlower} />

このように設定することとうまくいきます。
例えば /flower/2 でアクセスすると、:idには2が入り、propsとしてOneFlowerコンポーネントに2が渡されます。
上記の①のconsole.log(this.props)の中身を見て確認してみましょう。

上記の①のconsole.log(this.props)の中身
props {match: {…}, location: {…}, history: {…}, staticContext: undefined}
        ▶︎history: {length: 8, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
        ▶︎location: {pathname: "/flower/2", search: "", hash: "", state: undefined, key: "jnv2ih"}
        ▼match:
         isExact: true
         ▶︎params: {id: "2"}
         path: "/flower/:id"
         url: "/flower/2"
         ▶︎__proto__: Objects
         taticContext: undefined
        ▶︎__proto__: Object

となっているので、:idの部分を取得したい場合は

idの取り出し方
this.props.match.params.id

となります。簡単ですね。

Switchについて

SwitchはRouteの中で指定していないpathにアクセスした時に、pathを指定していないRouteコンポーネントを表示させることができます。

<Route
  component={NoContents} />

例の場合だと、上記のNoContentsコンポーネントが,「/」や「/flower/:id」以外にアクセスすると表示されるようになります。

Linkについて

<Link to={'/flower/' + e.id}>{e.name}</Link>

Linkはaタグと同じ機能を果たします。to=で書かれたpathにgetリクエストを送信します。

あとがき

React Routerは本当に便利ですね。これ以外にも便利な使い方があるみたいなので、皆さんも便利なReact Routerライフを送りましょう。

40
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
40
Help us understand the problem. What is going on with this article?