-
Notifications
You must be signed in to change notification settings - Fork 3.1k
chore(react): update react router links #3099
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
averyjohnston
merged 3 commits into
ionic-team:main
from
chawes13:chore/react-router-update
Sep 12, 2023
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,7 +15,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; | |
|
||
This guide covers how routing works in an app built with Ionic and React. | ||
|
||
`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. | ||
`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. | ||
|
||
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. | ||
|
||
|
@@ -56,7 +56,7 @@ You can also programmatically redirect from a Route's render method based on a c | |
|
||
## IonReactRouter | ||
|
||
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`. | ||
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`. | ||
|
||
## Nested Routes | ||
|
||
|
@@ -79,7 +79,7 @@ const DashboardPage: React.FC = () => { | |
|
||
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. | ||
|
||
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: | ||
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: | ||
|
||
```tsx | ||
const DashboardPage: React.FC<RouteComponentProps> = ({ match }) => { | ||
|
@@ -199,15 +199,15 @@ Other components that have the `routerLink` prop are `IonButton`, `IonCard`, `Io | |
|
||
Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use ("back", "forward", or "none"). | ||
|
||
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: | ||
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: | ||
|
||
```html | ||
<Link to="/dashboard/users/1">User 1</Link> | ||
``` | ||
|
||
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. | ||
|
||
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. | ||
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. | ||
|
||
```tsx | ||
<IonButton | ||
|
@@ -262,7 +262,7 @@ const UserDetailPage: React.FC<UserDetailPageProps> = ({ match }) => { | |
}; | ||
``` | ||
|
||
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. | ||
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. | ||
|
||
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. | ||
|
||
|
@@ -588,7 +588,7 @@ Since `IonRouterOutlet` takes over the job in determining which routes get rende | |
|
||
### 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 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. | ||
|
||
The `useIonRouter` hook returns a `UseIonRouterResult` which has several convenience methods for routing: | ||
|
||
|
@@ -643,7 +643,7 @@ const MyComponent: React.FC = () => { | |
|
||
## 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). | ||
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). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Changed the language a bit to hint at the fact that this is the documentation for React Router that Ionic uses, not necessarily the latest React Router documentation |
||
|
||
## From the Community | ||
|
||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Capitalized
router
for consistency