ionic 1.2.4_Ionic 4.1和React：导航

ionic 1.2.4

Navigating between pages is a core feature of any mobile application. Let’s look at how we can achieve this with React, React Router and Ionic 4.

在页面之间导航是任何移动应用程序的核心功能。 让我们看看如何使用React，React Router和Ionic 4实现这一目标。

For this article, I’m going to assume that you have a React and Ionic 4 application already up and running. If you haven’t done this yet - visit my article on Alligator.io that covers this already.

对于本文，我将假设您已经启动了React和Ionic 4应用程序并正在运行。 如果您尚未执行此操作， 请访问我在Alligator.io上的文章，其中已经介绍了该文章 。

The core dependencies we’ll need for this project are the following:

我们对该项目需要的核心依赖项如下：

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

创建我们的页面 (Creating Our Pages)

For routing to work, we’ll need some pages to route between. Let’s create two new files at src/pages/HomePage.js and src/pages/BlogPage.js

为了使路由正常工作，我们需要一些页面来进行路由。 让我们在src/pages/HomePage.js和src/pages/BlogPage.js创建两个新文件

This allows us to define a HomePage:

这使我们可以定义一个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

And a BlogPage:

和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

定义路线 (Defining Routes)

We can then define the routes for our application inside of App.js:

然后，我们可以在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;

While we could just define our Route with react-router-dom only, placing the Route inside of an IonRouterOutlet will enable animations within route changes.

虽然我们仅可以使用react-router-dom定义Route ，但将Route放在IonRouterOutlet将在路由更改内启用动画。

在两页之间导航 (Navigating Between Two Pages)

Navigating between two pages is therefore as easy as taking history from props and pushing a new Page onto the stack.

因此，在两个页面之间导航就像从props获取history并将新Page推入堆栈一样容易。

Let’s update the HomePage to accommodate this:

让我们更新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>
  </>
)

---

---

Pretty simple to achieve as you can see! Here’s the results of our work:

如您所见，实现起来非常简单！ 这是我们工作的结果：

翻译自: https://www.digitalocean.com/community/tutorials/ionic-ionic-4-react-navigation

ionic 1.2.4