Route with parameters render child component twice 打

By passing parameters to a component like this

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

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 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.