bug: react quick start guide does not mention withRouter when passing history as prop

[DunhamGitHub]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Trying to follow the simplest vanilla example (https://ionicframework.com/docs/react/quickstart), but getting an error:

Expected Behavior

No error in App.tsx when adding RouteComponentProps in Home.tsx

Steps to Reproduce

1. Follow the vanilla tutorial :https://ionicframework.com/docs/react/quickstart
2. Last step, before the error, is adding RouteComponentProps to const Home: React.FC = () => { so it becomes const Home: React.FC<RouteComponentProps> = () => { ...in Home.tsx (I am assuming all this is done in Home.tsx, the tutorial does not say...)
3. Importing RouteComponents import { RouteComponentProps } from "react-router-dom"; (not documented in the tutorial)
4. Switching to App.tsx show the error now (see "Current Behavior")

Code Reproduction URL

b

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 7.8.0

Capacitor:

   Capacitor CLI      : 5.7.3
   @capacitor/android : not installed
   @capacitor/core    : 5.7.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.11.1 (/usr/local/Cellar/node@20/20.11.1/bin/node)
   npm    : 10.2.4
   OS     : macOS Unknown

Additional Information

No response

[DunhamGitHub]

importing withRouter from react-router
...and...
changing export default Home; to export default withRouter(Home); eliminated the error.
But is that the proper solution?

[Liam DeBeasi]

Thanks! There looks to be some missing information in this quick start guide. The RouteComponentProps type is correct because the guide is trying to demonstrate how the history object can be passed as a property instead of having to call useHistory. However, withRouter is required in order to do this, but it's not mentioned on the guide. This is also confusing because it doesn't explicitly say to remove useHistory, so it's not entirely clear why it's showing both approaches.

I'm going to move this over to the docs repo so the team can work on clarifying this part of the guide.