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

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

Reactプロジェクトを作成

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

npx create-react-app my-app

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

Reactでプロジェクト作成

実際に本格的にReactでアプリケーションを作成していく場合はプロジェクトを作成する必要があるので、手順を説明していきます。VScodeで作成していくので、まだの方はVSCodeをインストールしておいて下さい。...

nabelog.org

2020.09.21

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】