From 5f7c15b2f1eedeac053400a7f078ca9721fea725 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Apr 2023 13:29:58 -0400 Subject: [PATCH 1/3] Update navigation.md --- docs/react/navigation.md | 44 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/docs/react/navigation.md b/docs/react/navigation.md index 234ff8e27b2..241b8d86f1d 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -591,6 +591,50 @@ When a user navigates to a session detail page ("/sessions/1" for instance), the 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`. +## Utilities + +### useIonRouter + +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. + +The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing. + +```typescript +type UseIonRouterResult = { + /** + * Navigates to a new pathname + * @param pathname - The path to navigate to + * @param routerDirection - Optional - The RouterDirection to use for transition purposes, defaults to 'forward' + * @param routeAction - Optional - The RouteAction to use for history purposes, defaults to 'push' + * @param routerOptions - Optional - Any additional parameters to pass to the router + * @param animationBuilder - Optional - A custom transition animation to use + */ + push( + pathname: string, + routerDirection?: RouterDirection, + routeAction?: RouteAction, + routerOptions?: RouterOptions, + animationBuilder?: AnimationBuilder + ): void; + /** + * Navigates backwards in history, using the IonRouter to determine history + * @param animationBuilder - Optional - A custom transition animation to use + */ + goBack(animationBuilder?: AnimationBuilder): void; + /** + * 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. + */ + canGoBack(): boolean; + routeInfo: RouteInfo; +}; +``` + +```tsx +const router = useIonRouter(); + +router.push('/my-page', 'root', 'replace'); +``` + ## More Information 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). From ac51e7069a89dcdcd1a72a536115610d0a4b70f1 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Apr 2023 13:43:56 -0400 Subject: [PATCH 2/3] Update navigation.md --- docs/react/navigation.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/docs/react/navigation.md b/docs/react/navigation.md index 241b8d86f1d..8e7967011d1 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -597,7 +597,7 @@ Since `IonRouterOutlet` takes over the job in determining which routes get rende 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. -The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing. +The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing: ```typescript type UseIonRouterResult = { @@ -625,16 +625,27 @@ type UseIonRouterResult = { * 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. */ canGoBack(): boolean; - routeInfo: RouteInfo; }; ``` +The following example shows how to use `useIonRouter`: + + ```tsx -const router = useIonRouter(); +import { useIonRouter } from '@ionic/react'; + +const MyComponent: React.FC = () => { + const router = useIonRouter(); + const goToPage = () => { + router.push('/my-page', 'root', 'replace'); + }; + + ... +} -router.push('/my-page', 'root', 'replace'); ``` + ## More Information 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). From 91879f4cce94a33d60120d8e128969dd892dc8fe Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 6 Apr 2023 13:45:29 -0400 Subject: [PATCH 3/3] Update navigation.md --- docs/react/navigation.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/react/navigation.md b/docs/react/navigation.md index 8e7967011d1..c24d363256b 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -625,6 +625,10 @@ type UseIonRouterResult = { * 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. */ canGoBack(): boolean; + /** + * Information about the current route. + */ + routeInfo: RouteInfo; }; ```