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

fix(react): nested router outlets will not reanimate entered views (#24672)

Browse Source 
Resolves #24107
This commit is contained in:
Sean Perkins
2022-01-31 11:55:08 -05:00
committed by GitHub
parent 484de5074d
commit 43aa6c11f4
7 changed files with 94 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React from 'react';
import { Route } from 'react-router-dom';
import { IonApp, setupIonicReact } from '@ionic/react';
import { IonApp, IonButton, IonContent, IonHeader, IonPage, IonRouterOutlet, IonTitle, IonToolbar, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
/* Core CSS required for Ionic components to work properly */
@ -24,17 +24,17 @@ import './theme/variables.css';
import Main from './pages/Main';
import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
import OverlayComponents from './pages/overlay-components/OverlayComponents';
import Tabs from './pages/Tabs';
setupIonicReact();
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<Route path="/" component={Main} />
<Route path="/overlay-hooks" component={OverlayHooks} />
<Route path="/overlay-components" component={OverlayComponents} />
<Route path="/tabs" component={Tabs} />
<IonRouterOutlet>
<Route path="/" component={Main} />
<Route path="/overlay-hooks" component={OverlayHooks} />
<Route path="/overlay-components" component={OverlayComponents} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);

60
packages/react/test-app/src/pages/Tabs.tsx
View File

@ -1,60 +0,0 @@
import { IonContent, IonHeader, IonLabel, IonPage, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import { Redirect, Route } from 'react-router';
const Tab1: React.FC = () => (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>
Tab 1
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonLabel>Tab 1 page</IonLabel>
</IonContent>
</IonPage>
);
const Tab2: React.FC = () => (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>
Tab 2
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonLabel>Tab 2 page</IonLabel>
</IonContent>
</IonPage>
);
const Tabs: React.FC = () => (
<IonTabs>
<IonRouterOutlet>
<Route exact path="/tabs/tab1">
<Tab1 />
</Route>
<Route exact path="/tabs/tab2">
<Tab2 />
</Route>
<Route exact path="/tabs">
<Redirect to ="/tabs/tab1" />
</Route>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/tab1">
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/tab2">
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
)
export default Tabs;