Help us understand the problem. What is going on with this article?

【超簡単】Reactのルーティング設定方法

More than 1 year has passed since last update.

概要

react-router-domを使用したReactでのルーティングの導入手順をまとめました。
簡単なページ遷移からRouterを利用した情報の渡し方までコードを交えて、簡易的に説明します。
※Reactでの開発環境が整っていることを前提条件としています。

output.gif

手順

以下の手順に沿って進めます。

  1. reactアプリの作成
  2. react-router-domのインストール
  3. Linkの設定
  4. Router・Routeの設定
  5. Propsを利用した情報の受け渡し方法

1. reactアプリの作成

まずはアプリの作成を行います。
以下のコマンドだけでアプリの作成が可能です。

$ create-react-app router-test

2. react-router-domのインストール

今回ルーティングの設定に用いるreact-router-domをインストールします。

$ npm install react-router-dom

3. Linkの設定

ここまでで開発の下準備は終わりましたので、実際にコードを書いていきます。
まず、クリックしたら指定したpathに飛ばすリンクを作成します。
今回はNavbar(名前はなんでもOK)というコンポーネントを作成して、そこにリンクを書き加えていきます。
これによって、
Homeをクリックしたら'/'というpathに飛ぶ。
Aboutクリックしたら'/About'というpathに飛ぶ。
という意味になります。

Navbar.js
import React from 'react'
import { Link } from 'react-router-dom'

class Navbar extends React.Component {
  render(){
    return(
      <div>
        <Link to="/">Home</Link>
        <Link to="/About">About</Link>
      </div>
    )
  }
}

export default Navbar;

4. Router・Routeの設定

後は、上記で作成したLinkpathとそのpath上で表示したいコンポーネントを結びつけるだけです。
これはRouterRouteによって実現できます。
今回はデフォルトで作成されるApp.js上に表示するコンポーネント(Home, About)を加えていきます。

ここで重要な事は主に2つだけです。

  1. Routerの中にRouteを書く。
  2. Routeの中にpathと対応するコンポーネントを書き込む。
App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './Navbar';
import About from './About';
import Home from './Home';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar /><hr/>
            <Route exact path='/' component={Home}/>
            <Route path='/About' component={About}/>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

ここまでの手順を辿れば、冒頭で示したアプリのような動きが実現されます。

5. Propsを利用した情報の受け渡し方法

最後にRouteからコンポーネントへ情報を受け渡す方法についてまとめます。
これはRoute内の指定するコンポーネントの書き方を変えれば簡単に実現できます。
ここではAboutというコンポーネントにTomという情報を渡しています。

App.js
class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div>
            <Navbar /><hr/>
            <Route exact path='/' component={Home}/>
            <Route path='/About' render={ () => <About name={'Tom'}/> }/>
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

これをAboutで表示するのは通常のpropsからの情報の受け取り方と同じで以下のようにします。

About.js
import React from 'react'

class About extends React.Component {
  render(){
    return(
      <div>
        <h1>About</h1>
        <h2>I am {this.props.name}</h2>
      </div>
    )
  }
}


export default About;

最終的にこのようになります。
Screen Shot 2018-06-29 at 10.40.53.png

k-penguin-sato
インフラ・サーバー・フロントと色々やりたいプログラマ。 https://dev.to/ksato1995
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした