Ionic 4.1とReact:ナビゲーション
ページ間の移動は、モバイルアプリケーションのコア機能です。 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>
</>
)
あなたが見ることができるように達成するのは非常に簡単です! これが私たちの仕事の結果です: