javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): fixes swipe to go back regression (#21791)

Browse Source
This commit is contained in:
Ely Lucas
2020-07-21 22:30:44 -06:00
committed by GitHub
parent 4199762d3e
commit a15cd01bc3
11 changed files with 118 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-router/test-app/src/App.tsx
View File

@ -34,6 +34,7 @@ import NestedOutlet2 from './pages/nested-outlet/NestedOutlet2';
import ReplaceAction from './pages/replace-action/Replace';
import TabsContext from './pages/tab-context/TabContext';
import { OutletRef } from './pages/outlet-ref/OutletRef';
import { SwipeToGoBack } from './pages/swipe-to-go-back/SwipToGoBack';
debugger;
const App: React.FC = () => {
return (
@ -49,6 +50,7 @@ const App: React.FC = () => {
<Route path="/replace-action" component={ReplaceAction} />
<Route path="/tab-context" component={TabsContext} />
<Route path="/outlet-ref" component={OutletRef} />
<Route path="/swipe-to-go-back" component={SwipeToGoBack} />
</IonReactRouter>
</IonApp>
);

3
packages/react-router/test-app/src/pages/Main.tsx
View File

@ -41,6 +41,9 @@ const Main: React.FC<MainProps> = () => {
<IonItem routerLink="/outlet-ref">
<IonLabel>Outlet Ref</IonLabel>
</IonItem>
<IonItem routerLink="/swipe-to-go-back">
<IonLabel>Swipe to go back</IonLabel>
</IonItem>
</IonList>
</IonContent>
</IonPage>

4
packages/react-router/test-app/src/pages/outlet-ref/OutletRef.tsx
View File

@ -22,8 +22,6 @@ export const OutletRef: React.FC<OutletRefProps> = () => {
);
};
const Main: React.FC<{ outletId?: string; }> = ({ outletId }) => {
return (
<IonPage data-pageid="main">
@ -38,5 +36,3 @@ const Main: React.FC<{ outletId?: string; }> = ({ outletId }) => {
</IonPage>
);
};
export default Main;

53
packages/react-router/test-app/src/pages/swipe-to-go-back/SwipToGoBack.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import { IonRouterOutlet, IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonButtons, IonBackButton } from '@ionic/react';
import { Route } from 'react-router';
interface SwipeToGoBackProps {
}
export const SwipeToGoBack: React.FC<SwipeToGoBackProps> = () => {
return (
<IonRouterOutlet id="swipe-to-go-back">
<Route path="/swipe-to-go-back" component={Main} exact />
<Route path="/swipe-to-go-back/details" component={Details} />
</IonRouterOutlet>
);
};
const Main: React.FC = () => {
return (
<IonPage data-pageid="main">
<IonHeader>
<IonToolbar>
<IonTitle>Main</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonItem routerLink="/swipe-to-go-back/details">
Details
</IonItem>
</IonContent>
</IonPage>
);
};
const Details: React.FC = () => {
return (
<IonPage data-pageid="details">
<IonHeader>
<IonToolbar>
<IonButtons>
<IonBackButton></IonBackButton>
</IonButtons>
<IonTitle>Details</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<div>Details</div>
</IonContent>
</IonPage>
);
};