react-router-domを使用したSPAの画面切り替え(遷移)の方法【React】

■はじめに

react-router-domを使用したSPA(シングルページアプリケーション)の画面切り替え(遷移)方法を記載します。

以下のサイトを参考に環境構築、プロジェクト作成は済ませてからこちらの記事をご覧ください。

www.reigle.info

■手順

画面の構成として、「One」「Two」の2つの画面を切り替えれるように記載します。

以下のコマンドで、「react-router-dom」をインストールします。

npm i react-router-dom

ソースコードの全量は以下。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Link } from 'react-router-dom'
import One from './One';
import Two from './Two';
class App extends Component {
render() {
return (
<div className="App">
<Router>
<div>
<Route exact path='/' component={One}/>
<Route path='/Two' component={Two}/>
<Link to="/">One</Link>
<br/>
<Link to="/Two">Two</Link>
</div>
</Router>
</div>
);
}
}
export default App;
import React from 'react'
class One extends React.Component {
render(){
return(
<div>
<h1>One</h1>
</div>
)
}
}
export default One;
import React from 'react'
class Two extends React.Component {
render(){
return(
<div>
<h1>Two</h1>
</div>
)
}
}
export default Two;

コメントを残す