0
# Navigation and Routing
1

2
Complete routing system with stack management, tabs, and navigation components designed for mobile applications with native-like transitions and behavior.
3

4
## Capabilities
5

6
### Router Components
7

8
Core routing components that manage navigation state and component rendering.
9

10
```typescript { .api }
11
/**
12
 * Router outlet component that renders routed components with stack management.
13
 * Handles page transitions and maintains navigation history.
14
 */
15
const IonRouterOutlet: React.FC<{
16
  className?: string;
17
  basePath?: string;
18
  /** Whether to automatically wrap rendered components in IonPage */
19
  ionPage?: boolean;
20
}>;
21

22
/**
23
 * Route definition component that maps URL paths to React components.
24
 * Works with IonRouterOutlet to provide declarative routing.
25
 */
26
const IonRoute: React.FC<{
27
  /** URL path pattern to match */
28
  path?: string;
29
  /** Whether the path must match exactly */
30
  exact?: boolean;
31
  /** Whether to show this route */
32
  show?: boolean;
33
  /** Function that returns the component to render */
34
  render: (props?: any) => JSX.Element;
35
  /** Disable automatic IonPage wrapping */
36
  disableIonPageManagement?: boolean;
37
}>;
38

39
/**
40
 * Route redirect component that redirects from one path to another.
41
 */
42
const IonRedirect: React.FC<{
43
  /** Source path to redirect from */
44
  path?: string;
45
  /** Whether the path must match exactly */
46
  exact?: boolean;
47
  /** Destination path to redirect to */
48
  to: string;
49
  /** Additional router options for the redirect */
50
  routerOptions?: RouterOptions;
51
}>;
52
```
53

54
### Navigation Links
55

56
Components for creating navigational links with routing capabilities.
57

58
```typescript { .api }
59
/**
60
 * Router-aware link component for programmatic navigation.
61
 * Provides native-like transitions and maintains navigation stack.
62
 */
63
const IonRouterLink: React.FC<{
64
  className?: string;
65
  children?: React.ReactNode;
66
  href: string;
67
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
68
  routerAnimation?: any;
69
}>;
70

71
/**
72
 * Back navigation button with automatic route detection.
73
 * Automatically shows/hides based on navigation stack.
74
 */
75
const IonBackButton: React.FC<{
76
  className?: string;
77
  color?: string;
78
  defaultHref?: string;
79
  disabled?: boolean;
80
  icon?: any;
81
  text?: string;
82
  routerAnimation?: any;
83
}>;
84
```
85

86
### Tab Navigation
87

88
Complete tab navigation system with router integration and state management.
89

90
```typescript { .api }
91
/**
92
 * Tab container component with router integration and outlet support.
93
 * Manages tab state and provides context for tab buttons and outlets.
94
 */
95
const IonTabs: React.FC<{
96
  className?: string;
97
  children?: React.ReactNode;
98
  /** Callback fired when tab will change */
99
  onIonTabsWillChange?: (event: CustomEvent<{ tab: string }>) => void;
100
  /** Callback fired when tab did change */
101
  onIonTabsDidChange?: (event: CustomEvent<{ tab: string }>) => void;
102
}>;
103

104
/**
105
 * Tab bar component that contains tab buttons.
106
 * Typically used as a child of IonTabs.
107
 */
108
const IonTabBar: React.FC<{
109
  className?: string;
110
  children?: React.ReactNode;
111
  color?: string;
112
  selectedTab?: string;
113
  translucent?: boolean;
114
}>;
115

116
/**
117
 * Individual tab button component.
118
 * Used within IonTabBar to create tappable tab navigation.
119
 */
120
const IonTabButton: React.FC<{
121
  className?: string;
122
  children?: React.ReactNode;
123
  tab: string;
124
  disabled?: boolean;
125
  download?: string;
126
  href?: string;
127
  rel?: string;
128
  target?: string;
129
  layout?: 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
130
}>;
131

132
/**
133
 * Tab content container.
134
 * Represents the content area for a specific tab.
135
 */
136
const IonTab: React.FC<{
137
  className?: string;
138
  children?: React.ReactNode;
139
  tab: string;
140
}>;
141
```
142

143
### Menu Navigation
144

145
Side menu components for creating drawer-style navigation.
146

147
```typescript { .api }
148
/**
149
 * Side menu component that slides in from the side.
150
 * Can contain navigation items and other content.
151
 */
152
const IonMenu: React.FC<{
153
  className?: string;
154
  children?: React.ReactNode;
155
  contentId: string;
156
  menuId?: string;
157
  side?: 'start' | 'end';
158
  type?: 'overlay' | 'reveal' | 'push';
159
  disabled?: boolean;
160
  swipeGesture?: boolean;
161
  maxEdgeStart?: number;
162
}>;
163

164
/**
165
 * Button to toggle menu open/closed state.
166
 * Automatically detects and controls the nearest menu.
167
 */
168
const IonMenuButton: React.FC<{
169
  className?: string;
170
  autoHide?: boolean;
171
  color?: string;
172
  disabled?: boolean;
173
  menu?: string;
174
  type?: 'button' | 'submit' | 'reset';
175
}>;
176

177
/**
178
 * Menu toggle wrapper that shows/hides content based on menu state.
179
 */
180
const IonMenuToggle: React.FC<{
181
  className?: string;
182
  children?: React.ReactNode;
183
  autoHide?: boolean;
184
  menu?: string;
185
  disabled?: boolean;
186
}>;
187
```
188

189
### Programmatic Navigation
190

191
Programmatic navigation component for complex navigation scenarios.
192

193
```typescript { .api }
194
/**
195
 * Programmatic navigation component that manages a stack of pages.
196
 * Provides imperative API for pushing and popping pages.
197
 */
198
const IonNav: React.FC<{
199
  className?: string;
200
  root?: React.ComponentType<any>;
201
  rootParams?: any;
202
  onIonNavDidChange?: (event: CustomEvent) => void;
203
  onIonNavWillChange?: (event: CustomEvent) => void;
204
}>;
205

206
/**
207
 * Navigation link component for programmatic navigation.
208
 * Pushes a new component onto the navigation stack.
209
 */
210
const IonNavLink: React.FC<{
211
  className?: string;
212
  children?: React.ReactNode;
213
  component?: React.ComponentType<any>;
214
  componentProps?: any;
215
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
216
}>;
217
```
218

219
### Breadcrumb Navigation
220

221
Breadcrumb components for showing navigation hierarchy.
222

223
```typescript { .api }
224
/**
225
 * Container for breadcrumb navigation items.
226
 */
227
const IonBreadcrumbs: React.FC<{
228
  className?: string;
229
  children?: React.ReactNode;
230
  color?: string;
231
  maxItems?: number;
232
  itemsAfterCollapse?: number;
233
  itemsBeforeCollapse?: number;
234
}>;
235

236
/**
237
 * Individual breadcrumb item with routing capabilities.
238
 */
239
const IonBreadcrumb: React.FC<{
240
  className?: string;
241
  children?: React.ReactNode;
242
  active?: boolean;
243
  disabled?: boolean;
244
  download?: string;
245
  href?: string;
246
  rel?: string;
247
  target?: string;
248
  routerLink?: string;
249
  routerDirection?: 'forward' | 'back' | 'root' | 'none';
250
}>;
251
```
252

253
**Usage Examples:**
254

255
```typescript
256
import React from 'react';
257
import { 
258
  IonRouterOutlet, IonRoute, IonRedirect, 
259
  IonTabs, IonTabBar, IonTabButton, IonTab,
260
  IonBackButton, IonRouterLink
261
} from '@ionic/react';
262
import { IonReactRouter } from '@ionic/react-router';
263

264
// Basic routing setup
265
const AppRouting: React.FC = () => (
266
  <IonReactRouter>
267
    <IonRouterOutlet>
268
      <IonRoute path="/home" render={() => <HomePage />} exact />
269
      <IonRoute path="/settings" render={() => <SettingsPage />} exact />
270
      <IonRedirect from="/" to="/home" exact />
271
    </IonRouterOutlet>
272
  </IonReactRouter>
273
);
274

275
// Tab navigation setup
276
const TabsExample: React.FC = () => (
277
  <IonTabs>
278
    <IonRouterOutlet>
279
      <IonRoute path="/tabs/home" render={() => <HomePage />} />
280
      <IonRoute path="/tabs/settings" render={() => <SettingsPage />} />
281
      <IonRedirect from="/tabs" to="/tabs/home" exact />
282
    </IonRouterOutlet>
283
    
284
    <IonTabBar>
285
      <IonTabButton tab="home" href="/tabs/home">
286
        <IonIcon icon={home} />
287
        Home
288
      </IonTabButton>
289
      <IonTabButton tab="settings" href="/tabs/settings">
290
        <IonIcon icon={settings} />
291
        Settings
292
      </IonTabButton>
293
    </IonTabBar>
294
  </IonTabs>
295
);
296

297
// Page with navigation
298
const DetailPage: React.FC = () => (
299
  <IonPage>
300
    <IonHeader>
301
      <IonToolbar>
302
        <IonButtons slot="start">
303
          <IonBackButton defaultHref="/home" />
304
        </IonButtons>
305
        <IonTitle>Details</IonTitle>
306
      </IonToolbar>
307
    </IonHeader>
308
    
309
    <IonContent>
310
      <IonRouterLink href="/other-page">
311
        Go to Other Page
312
      </IonRouterLink>
313
    </IonContent>
314
  </IonPage>
315
);
316
```
317

318
## Types
319

320
```typescript { .api }
321
interface RouterOptions {
322
  /** Navigation direction for animations */
323
  direction?: 'forward' | 'back' | 'root' | 'none';
324
  /** Whether to animate the transition */
325
  animated?: boolean;
326
  /** Custom animation to use */
327
  animation?: any;
328
  /** Animation duration in milliseconds */
329
  duration?: number;
330
}
331

332
interface RouteInfo {
333
  /** Current pathname */
334
  pathname: string;
335
  /** Current search string */
336
  search: string;
337
  /** Current hash */
338
  hash: string;
339
  /** Route state object */
340
  state?: any;
341
}
342

343
type RouterDirection = 'forward' | 'back' | 'root' | 'none';
344

345
/** Props interface for routing-enabled components */
346
interface HrefProps {
347
  /** URL to navigate to */
348
  href?: string;
349
  /** Target window for link */
350
  target?: string;
351
  /** Download attribute */
352
  download?: string;
353
  /** Relationship between current and linked document */
354
  rel?: string;
355
  /** Router direction for animations */
356
  routerDirection?: RouterDirection;
357
  /** Custom animation for navigation */
358
  routerAnimation?: any;
359
}
360

361
/** Navigation action types */
362
enum RouteAction {
363
  Push = 'push',
364
  Pop = 'pop',
365
  Replace = 'replace'
366
}
367

368
/** React component or element type */
369
type ReactComponentOrElement = React.ComponentType<any> | React.ReactElement<any>;
370
```