開発日記

Reactでページ遷移をやってみた!


Warning: count(): Parameter must be an array or an object that implements Countable in /home/c9962019/public_html/mochinoki-labo.com/wp-content/plugins/rich-table-of-content/functions.php on line 490

こんにちは、MSKです。
Reactの関数コンポーネントを使ってページ遷移を試してみました。

準備

まずはReactアプリを準備します。
typescriptを使っていきます。

npm create-react-app react-app --template typescript

ページ遷移を実装するためのパッケージをインストールします。
今回使うのはreact-router-domです。

npm install react-router-dom
npm install @types/react-router-dom

コーディング

srcフォルダの中にComponentsというフォルダを作り、その中にRouteManager、Navbar、Home、About、Create、Contactというフォルダを作ります。
それぞれのフォルダの中に(フォルダ名).tsxというファイルを作成します。
Home、About、Create、Contactにはとりあえず、コンポーネントを作ってそれぞれの名前を表示するようにしておきます。
例えば、

import React from 'react'

const Home= () => {
    return (
        <div>
            Home
        </div>
    )
}

export default Home;

のような感じです。

次にNavBarを作ります。
NavBarではリンクを作成します。
Linkタグのtoというプロパティで飛ぶ先のパスを指定します。

import React from 'react';
import {Link} from 'react-router-dom';
import './Navbar.scss';

const Navbar:React.FC = () => {
    return (
        <div className="nav-bar">
            <Link to="/" className="nav-link">Home</Link>
            <Link to="/About" className="nav-link">About</Link>
            <Link to="/Create" className="nav-link">Create</Link>
            <Link to="/Contact" className="nav-link">Contact</Link>
        </div>
    )
}

export default Navbar;

例えば上のソースではHomeをクリックすると/というパスに飛びます。

RouteManagerはNavBarで作成したリンクのパスとコンポーネントを結びつけることをします。
RouteManagerのソースは次のようにします。

import React from 'react';
import {BrowserRouter as Router,Route} from 'react-router-dom';
import Home  from '../Home/Home';
import About from '../About/About';
import Create from '../Create/Create';
import Contact from '../Contact/Contact';
import NavBar from '../Navbar/Navbar';

const RouteManager:React.FC = () => {
    return (
        <Router>
            <div>
                <NavBar /><hr/>
                <Route  exact path='/' component={Home} />
                <Route  path='/About' component={About}/>
                <Route  path='/Create' component={Create}/>
                <Route  path='/Contact' component={Contact}/>
            </div>
        </Router>
    )
}

export default RouteManager;

使うのはRouterとRouteです。
Routeタグのpathプロパティにリンクさせたいパスを指定して、componentプロパティにそのパスと紐づけるコンポーネントを書きます。

最後にRouteManagerを呼び出します。
srcの中のindex.tsxを次のようにします。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import reportWebVitals from './reportWebVitals';
import RouteManager from './Components/RouteManager/RouteManager';

ReactDOM.render(
  <React.StrictMode>
    <RouteManager />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

デフォルトではAppタグが書かれていた場所にRouteManagerを入れただけです。

ポートフォリオサイト用として作っていたので、最小限の表示からは変わっていますが、こんな感じでページ遷移ができるはずです。

最後に

Reactの関数コンポーネントを使って、ページ遷移を行ってみました。
react-router-domを使えば結構簡単にページ遷移を実現できます。

以上、「Reactでページ遷移をやってみた!」でした。
最後までご覧いただき、ありがとうございました!

ABOUT ME
MSK
九州在住の組み込み系エンジニアです。 2児の父親でもあります。 数学やプログラミングが趣味です。 最近RustとReact、結び目理論と曲面結び目理論にはまっています。