【React.js】画面遷移【ルーティング処理】

Reactで画面遷移をする方法を説明していきます。
もちろんaタグなどでも遷移できるのですが、Reactの便利な機能を使いましょう。

Reactプロジェクトを作成

VSCodeのターミナルを起動し、作成したいフォルダに移動し、「my-app」を好きなプロジェクト名にしてプロジェクトを作成して下さい。

npx create-react-app my-app

わからない方は下記を参照し、順番に行って下さい。

react-router-domをインストールします。

npm i -S react-router-dom

コードは以下です。

import React, {Component}  from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom'
import logo from './logo.svg';
import './App.css';

const App = () =>(
  <BrowserRouter>
    <div>
      <Route exact path='/' component={Home} />
      <Route path='/about' component={About} />
      <Route path='/blog/:id' component={Blog} />
      <Route path='/sum/:num1/:num2' component={Sum} />
    </div>
  </BrowserRouter>
)

const Home = () =>{
  return (
    <div>
      <h1>welcome</h1>
      <p><Link to='/about'>About</Link></p>
    </div>
  )
}
const About = () =>{
  return (
    <div>
      <h1>about</h1>
    </div>
  )
}
const Blog = (props) => {
  const { id } = props.match.params

  return (
    <div>
      <p>{id}番目の記事</p>
    </div>
  )
}
const Sum = (props) => {
  const { num1, num2 } = props.match.params

  return (
    <div>
      <p>
        {num1} + {num2} = {parseInt(num1) + parseInt(num2)}
      </p>
    </div>
  )
}
export default App;

Appメソッドの中のBrowserRouterタグ内に<Route exact path=’/’ component={Home} />のように記載します。
これだけexactがついますが、こちらはpathに指定した文字列と、location.pathNameが完全一致した場合のみコンポーネントを返すようになります。

idを指定することもできます。

フリーランスを目指すなら【テックパートナーズカレッジ】

未経験者向けWEBスクール【SHElikes】