Route with parameters render child component twice 打

By passing parameters to a component like this

<IonApp >
  <IonReactRouter>
    <IonTabs >
      <IonRouterOutlet>
        <Route exact path={`/profile/:profileId`} component={ProfileComponent}/>
       </IonRouterOutlet>
        <IonTabBar slot="bottom" >
             ....
         </IonTabBar>
    </IonTabs>
  </IonReactRouter>
</IonApp>

The child component will be rendered twice.

export const ProfileComponent: React.FC = () => {
  console.log("ProfileComponent rendered"); //fire twice
  return <></>
}

Using render=(()=>{} or passing the component as a children of Route will only trigger the render one, but the parameters will be unaccessible. and calling UseParams() will trigger another render.

<Route exact path={`/profile/:profileId`} >
  <PartnerProfilePage /> // no re-render but params not being send
</Route>

<Route exact path={`/profile/:profileId`} render={() => <ProfileComponent/>}/> // same, no re-render but params not being send

The only solution I have now is using window.location,pathname.