Skip to content

Commit f411bab

Browse files
authored
chore(react): update react router links (#3099)
* Fix doc links * Fix GH link * Fix typo
1 parent af6249f commit f411bab

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

docs/react/navigation.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
1515

1616
This guide covers how routing works in an app built with Ionic and React.
1717

18-
`IonReactRouter` uses the popular [React Router](https://github.com/ReactTraining/react-router) library under the hood. With Ionic and React Router, you can create multi-page apps with rich page transitions.
18+
`IonReactRouter` uses the popular [React Router](https://github.com/remix-run/react-router) library under the hood. With Ionic and React Router, you can create multi-page apps with rich page transitions.
1919

2020
Everything you know about routing using React Router carries over into Ionic React. Let's take a look at the basics of an Ionic React app and how routing works with it.
2121

@@ -56,7 +56,7 @@ You can also programmatically redirect from a Route's render method based on a c
5656

5757
## IonReactRouter
5858

59-
The `IonReactRouter` component wraps the traditional [`BrowserRouter`](https://reacttraining.com/react-router/web/api/BrowserRouter) component from React Router, and sets the app up for routing. Therefore, use `IonReactRouter` in place of `BrowserRouter`. You can pass in any props to `IonReactRouter` and they will be passed down to the underlying `BrowserRouter`.
59+
The `IonReactRouter` component wraps the traditional [`BrowserRouter`](https://v5.reactrouter.com/web/api/BrowserRouter) component from React Router, and sets the app up for routing. Therefore, use `IonReactRouter` in place of `BrowserRouter`. You can pass in any props to `IonReactRouter` and they will be passed down to the underlying `BrowserRouter`.
6060

6161
## Nested Routes
6262

@@ -79,7 +79,7 @@ const DashboardPage: React.FC = () => {
7979

8080
Here, there are a couple more routes defined to point to pages from within the dashboard portion of the app. Note, that we need to define the whole route in the path, and we can't leave off "/dashboard" even though we arrived to this page from that URL. React Router requires full paths, and relative paths are not supported.
8181

82-
However, we can use the [`match`](https://reacttraining.com/react-router/web/api/match) objects `url` property to provide the URL that was matched to render a component, which helps when working with nested routes:
82+
However, we can use the [`match`](https://v5.reactrouter.com/web/api/match) objects `url` property to provide the URL that was matched to render a component, which helps when working with nested routes:
8383

8484
```tsx
8585
const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => {
@@ -199,15 +199,15 @@ Other components that have the `routerLink` prop are `IonButton`, `IonCard`, `Io
199199

200200
Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use ("back", "forward", or "none").
201201

202-
Outside of these components that have the `routerLink` prop, you can also use React Routers [`Link`](https://reacttraining.com/react-router/web/api/Link) component to navigate between views:
202+
Outside of these components that have the `routerLink` prop, you can also use React Routers [`Link`](https://v5.reactrouter.com/web/api/Link) component to navigate between views:
203203

204204
```html
205205
<Link to="/dashboard/users/1">User 1</Link>
206206
```
207207

208208
We recommend using one of the above methods whenever possible for routing. The advantage to these approaches is that they both render an anchor (`<a>`)tag, which is suitable for overall app accessibility.
209209

210-
A programmatic option for navigation is using the [`history`](https://reacttraining.com/react-router/web/api/history) prop that React Router provides to the components it renders via routes.
210+
A programmatic option for navigation is using the [`history`](https://v5.reactrouter.com/web/api/history) prop that React Router provides to the components it renders via routes.
211211

212212
```tsx
213213
<IonButton
@@ -262,7 +262,7 @@ const UserDetailPage: React.FC<UserDetailPageProps> = ({ match }) => {
262262
};
263263
```
264264

265-
The [`match`](https://reacttraining.com/react-router/web/api/match) prop contains information about the matched route, including the URL params. We obtain the `id` param here and display it on the screen.
265+
The [`match`](https://v5.reactrouter.com/web/api/match) prop contains information about the matched route, including the URL params. We obtain the `id` param here and display it on the screen.
266266

267267
Note how we use a TypeScript interface to strongly type the props object. The interface gives us type safety and code completion inside of the component.
268268

@@ -588,7 +588,7 @@ Since `IonRouterOutlet` takes over the job in determining which routes get rende
588588

589589
### useIonRouter
590590

591-
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.
591+
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 animation, before calling React Router.
592592

593593
The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing:
594594

@@ -643,7 +643,7 @@ const MyComponent: React.FC = () => {
643643

644644
## More Information
645645

646-
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).
646+
For more info on routing in React using the React Router implementation that Ionic uses under the hood, check out their docs at [https://v5.reactrouter.com/web](https://v5.reactrouter.com/web).
647647

648648
## From the Community
649649

0 commit comments

Comments
 (0)