Ionic 4.1とReact：ナビゲーション

投稿日: 2022-04-20 2022-04-20

ページ間の移動は、モバイルアプリケーションのコア機能です。 React、React Router、Ionic4でこれを実現する方法を見てみましょう。

この記事では、ReactおよびIonic4アプリケーションがすでに稼働していることを前提としています。まだこれを行っていない場合は、これについてすでに説明しているAlligator.ioの私の記事にアクセスしてください。

このプロジェクトに必要な主要な依存関係は次のとおりです。

$ npm i @ionic/core @ionic/react react-router react-router-dom

ページの作成

ルーティングを機能させるには、ルーティングするページがいくつか必要です。 src/pages/HomePage.jsとsrc/pages/BlogPage.jsに2つの新しいファイルを作成しましょう

これにより、HomePageを定義できます。

import React from 'react';
import { IonToolbar, IonTitle, IonContent, IonCard, IonHeader, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonButton } from '@ionic/react'

const HomePage = () => (
  <>
    <IonHeader>
      <IonToolbar color="primary">
        <IonTitle>Home Page</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>Home Page</IonCardSubtitle>
          <IonCardTitle>Let's take a look at the blog</IonCardTitle>
        </IonCardHeader>
        <IonCardContent>
          <p>Sounds like a great idea. Click the button below!</p>

          <IonButton>Blog</IonButton>
        </IonCardContent>
      </IonCard>
    </IonContent>
  </>
)
export default HomePage

そしてBlogPage：

import React from 'react';
import { IonToolbar, IonTitle, IonContent, IonCard, IonHeader, IonCardHeader, IonCardTitle, IonCardSubtitle, } from '@ionic/react'

const BlogPage = () => (
  <>
    <IonHeader>
      <IonToolbar color="primary">
        <IonTitle>Blog Page</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>Vue.js</IonCardSubtitle>
          <IonCardTitle>Ionic 4 and Vue.js</IonCardTitle>
        </IonCardHeader>
      </IonCard>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>REACT</IonCardSubtitle>
          <IonCardTitle>Ionic 4 and React</IonCardTitle>
        </IonCardHeader>
      </IonCard>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>ANGULAR</IonCardSubtitle>
          <IonCardTitle>Ionic 4 and Angular</IonCardTitle>
        </IonCardHeader>
      </IonCard>
    </IonContent>
  </>
)
export default BlogPage

ルートの定義

次に、App.js内でアプリケーションのルートを定義できます。

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { IonApp, IonPage, IonRouterOutlet } from '@ionic/react';

import HomePage from './pages/HomePage';
import BlogPage from './pages/BlogPage';

import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <IonApp>
            <IonPage id="main">
              <IonRouterOutlet>
                <Route exact path="/" component={HomePage} />
                <Route path="/blog" component={BlogPage} />
              </IonRouterOutlet>
            </IonPage>
          </IonApp>
        </div>
      </Router>
    );
  }
}

export default App;

Routeをreact-router-domのみで定義することもできますが、RouteをIonRouterOutlet内に配置すると、ルート変更内のアニメーションが有効になります。

2つのページ間を移動する

したがって、2つのページ間を移動するのは、propsからhistoryを取り出し、新しいPageをスタックにプッシュするのと同じくらい簡単です。

これに対応するためにHomePageを更新しましょう。

const HomePage = ({history}) => (
  <>
    <IonHeader>
      <IonToolbar color="primary">
        <IonTitle>Home Page</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>Home Page</IonCardSubtitle>
          <IonCardTitle>Let's take a look at the blog</IonCardTitle>
        </IonCardHeader>
        <IonCardContent>
          <p>Sounds like a great idea. Click the button below!</p>

          <IonButton onclick={(e) => {
            e.preventDefault();
            history.push('/blog')}}>Blog</IonButton>
        </IonCardContent>
      </IonCard>
    </IonContent>
  </>
)

あなたが見ることができるように達成するのは非常に簡単です！これが私たちの仕事の結果です：

Animated screenshot of our app

getdocs

13036