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

fix(react): fix regression with history.replace in new react router (#21698)

Browse Source
This commit is contained in:
Ely Lucas
2020-07-08 10:22:08 -06:00
committed by GitHub
parent c171ccbd37
commit 81ef3f1ecd
8 changed files with 135 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,7 @@ import MultipleTabs from './pages/muiltiple-tabs/MultipleTabs';
import DynamicTabs from './pages/dynamic-tabs/DynamicTabs';
import NestedOutlet from './pages/nested-outlet/NestedOutlet';
import NestedOutlet2 from './pages/nested-outlet/NestedOutlet2';
import ReplaceAction from './pages/replace-action/Replace';
debugger;
const App: React.FC = () => {
return (
@ -44,6 +45,7 @@ const App: React.FC = () => {
<Route path="/dynamic-tabs" component={DynamicTabs} />
<Route path="/nested-outlet" component={NestedOutlet} />
<Route path="/nested-outlet2" component={NestedOutlet2} />
<Route path="/replace-action" component={ReplaceAction} />
</IonReactRouter>
</IonApp>

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

@ -32,10 +32,13 @@ const Main: React.FC<MainProps> = () => {
<IonItem routerLink="/nested-outlet2">
<IonLabel>Nested Outlet 2</IonLabel>
</IonItem>
<IonItem routerLink="/replace-action">
<IonLabel>Replace Action</IonLabel>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
export default Main;
export default Main;

82
packages/react-router/test-app/src/pages/replace-action/Replace.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonRouterOutlet, IonButtons, IonBackButton } from '@ionic/react';
import { Route, Redirect, useHistory } from 'react-router';
interface TopPageProps {
}
const ReplaceAction: React.FC<TopPageProps> = () => {
return (
<IonRouterOutlet>
<Route path="/replace-action/page1" component={Page1} exact />
<Route path="/replace-action/page2" component={Page2} exact />
<Route path="/replace-action/page3" component={Edit} exact />
<Route exact path="/replace-action" render={() => <Redirect to="/replace-action/page1" />} />
</IonRouterOutlet>
);
};
const Page1: React.FC = () => (
<IonPage data-pageid="page1">
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton />
</IonButtons>
<IonTitle>Page one</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton routerLink={'/replace-action/page2'}>
Goto Page2
</IonButton>
</IonContent>
</IonPage>
);
const Page2: React.FC = () => {
const history = useHistory();
const clickButton = () => {
history.replace('/replace-action/page3');
};
return (
<IonPage data-pageid="page2">
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton/>
</IonButtons>
<IonTitle>Page two</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton onClick={() => clickButton()}>
Goto Page3
</IonButton>
</IonContent>
</IonPage>
);
};
const Edit: React.FC = () => {
return (
<IonPage data-pageid="page3">
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton defaultHref="/replace-action/page1"/>
</IonButtons>
<IonTitle>Page three</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<p>Page 3</p>
</IonContent>
</IonPage>
);
};
export default ReplaceAction;

4
packages/react-router/test-app/src/pages/routing/Routing.tsx
View File

@ -6,7 +6,6 @@ import Tabs from './Tabs';
import Favorites from './Favorites';
import OtherPage from './OtherPage';
import PropsTest from './PropsTest';
import TopPage from './TopPage';
interface RoutingProps {
}
@ -36,7 +35,6 @@ const Routing: React.FC<RoutingProps> = () => {
}} /> */}
<Route path="/routing/otherpage" component={OtherPage} />
<Route path="/routing/propstest" component={PropsTest} />
<Route path="/routing/toppage" component={TopPage} />
<Route render={() => <IonPage data-pageid="not-found"><IonContent><div>Not found</div></IonContent></IonPage>} />
{/* <Route render={() => <Redirect to="/tabs" />} /> */}
@ -45,4 +43,4 @@ const Routing: React.FC<RoutingProps> = () => {
);
};
export default Routing;
export default Routing;

24
packages/react-router/test-app/src/pages/routing/TopPage.tsx
View File

@ -1,24 +0,0 @@
import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from '@ionic/react';
interface TopPageProps {
}
const TopPage: React.FC<TopPageProps> = () => {
return (
<IonPage data-pageid="toppage">
<IonHeader>
<IonToolbar>
<IonTitle>TopPage</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonButton routerLink="/otherpage">
Go to Other Page
</IonButton>
</IonContent>
</IonPage>
);
};
export default TopPage;