Skip to content

Commit c0a0630

Browse files
authored
docs(react): add example for useIonRouter (#2888)
1 parent 590b0c8 commit c0a0630

File tree

1 file changed

+59
-0
lines changed

1 file changed

+59
-0
lines changed

docs/react/navigation.md

+59
Original file line numberDiff line numberDiff line change
@@ -591,6 +591,65 @@ When a user navigates to a session detail page ("/sessions/1" for instance), the
591591

592592
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`.
593593

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+
type UseIonRouterResult = {
604+
/**
605+
* Navigates to a new pathname
606+
* @param pathname - The path to navigate to
607+
* @param routerDirection - Optional - The RouterDirection to use for transition purposes, defaults to 'forward'
608+
* @param routeAction - Optional - The RouteAction to use for history purposes, defaults to 'push'
609+
* @param routerOptions - Optional - Any additional parameters to pass to the router
610+
* @param animationBuilder - 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+
* @param animationBuilder - 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+
594653
## More Information
595654

596655
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

Comments
 (0)