2 jawaban

Jawaban Terbaik

Ada metode tidak berdokumen untuk memicu pengalihan router Ionic ke alamat mana pun dengan animasi apa pun: NavContext. Itu hanya dapat digunakan di dalam komponen React.

import React, {Component, useCallback, useContext} from 'react';
import {NavContext} from '@ionic/react';

// Functional component example
function MyComponent() {
  const {navigate} = useContext(NavContext);

  // Call this function when required to redirect with the back animation
  const redirect = useCallback(
    () => navigate('/new/address', 'back'),
    [navigate]
  );
}

// Class component example
class MyComponent extends Component {
  static contextType = NavContext;

  // Call this method when required to redirect with the back animation
  redirect() {
    this.context.navigate('/new/address', 'back');
  }
}

Nilai yang mungkin untuk argumen kedua adalah sama seperti pada komponen tautan ionik: back, forward dan root.

9
Finesse 10 Maret 2020, 10:40

Seperti yang ditunjukkan oleh @Finesse, pustaka reaksi Ionic menyediakan NavContext konteks navigasi yang memaparkan beberapa metode bermanfaat dalam konteks navigasi, yang dimaksudkan pun,.

Di antaranya adalah metode goBack() yang hanya menavigasi kembali. Dibutuhkan rute default untuk menavigasi. Saya kira itu untuk kasus ketika tidak ada item sebelumnya di tumpukan belakang. Ini dapat digunakan sebagai berikut:

import {useContext} from 'react'
import {NavContext} from '@ionic/react'
...
const {goBack} = useContext(NavContext)
goBack('/alternative/path/if/empty/history')
...

Selain navigate() dan goBack() konteksnya menyediakan bidang berikut:

export interface NavContextState {
  getPageManager: () => any;
  getStackManager: () => any;
  goBack: (defaultHref?: string) => void;
  navigate: (path: string, direction?: RouterDirection | 'none', ionRouteAction?: 'push' | 'replace' | 'pop') => void;
  hasIonicRouter: () => boolean;
  registerIonPage: (page: HTMLElement) => void;
  currentPath: string | undefined;
}
5
Lars Blumberg 12 Juni 2020, 14:34