You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/react/navigation.md
+59
Original file line number
Diff line number
Diff line change
@@ -591,6 +591,65 @@ When a user navigates to a session detail page ("/sessions/1" for instance), the
591
591
592
592
Since `IonRouterOutlet` takes over the job in determining which routes get rendered, using a `Switch` from React Router has no effect when used inside of an `IonRouterOutlet`. Switches still function as expected when used outside an `IonRouterOutlet`.
593
593
594
+
## Utilities
595
+
596
+
### useIonRouter
597
+
598
+
The `useIonRouter` hook can be used for more direct control over routing in Ionic React. It allows you to pass additional metadata to Ionic, such as a custom animaton, before calling React router.
599
+
600
+
The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing:
601
+
602
+
```typescript
603
+
typeUseIonRouterResult= {
604
+
/**
605
+
* Navigates to a new pathname
606
+
* @parampathname - The path to navigate to
607
+
* @paramrouterDirection - Optional - The RouterDirection to use for transition purposes, defaults to 'forward'
608
+
* @paramrouteAction - Optional - The RouteAction to use for history purposes, defaults to 'push'
609
+
* @paramrouterOptions - Optional - Any additional parameters to pass to the router
610
+
* @paramanimationBuilder - Optional - A custom transition animation to use
611
+
*/
612
+
push(
613
+
pathname:string,
614
+
routerDirection?:RouterDirection,
615
+
routeAction?:RouteAction,
616
+
routerOptions?:RouterOptions,
617
+
animationBuilder?:AnimationBuilder
618
+
):void;
619
+
/**
620
+
* Navigates backwards in history, using the IonRouter to determine history
621
+
* @paramanimationBuilder - Optional - A custom transition animation to use
622
+
*/
623
+
goBack(animationBuilder?:AnimationBuilder):void;
624
+
/**
625
+
* Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.
626
+
*/
627
+
canGoBack():boolean;
628
+
/**
629
+
* Information about the current route.
630
+
*/
631
+
routeInfo:RouteInfo;
632
+
};
633
+
```
634
+
635
+
The following example shows how to use `useIonRouter`:
636
+
637
+
638
+
```tsx
639
+
import { useIonRouter } from'@ionic/react';
640
+
641
+
const MyComponent:React.FC= () => {
642
+
const router =useIonRouter();
643
+
const goToPage = () => {
644
+
router.push('/my-page', 'root', 'replace');
645
+
};
646
+
647
+
...
648
+
}
649
+
650
+
```
651
+
652
+
594
653
## More Information
595
654
596
655
For more info on routing in React using React Router, check out their docs at [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web).
0 commit comments