Ionic-react history.replace() not navigating

Ionic Framework Ionic React
1

I am working on an Ionic react application (v5.0.7).
I have all my paths inside <IonRouterOutlet>.
For the navigation stack management, setting root I am using history.replace() method, but it is not navigating to that screen.

I have a scenario like. From the login screen after the correct login, I want to set root as a Home screen. So I am using history.replace() to navigate to the Home screen, but the home page is not shown (willEnter,DidEnter none of the methods are called).
In Route element, if I console in the render method of home it prints the log, and in Ionic serve the URL is also changed on the top but the page is not changed (no error in console for this)

Now with the same code if I just change history.replace() to history.push(). it starts working and navigate to the home page, but it will allow logged in user to go back to the login screen without login

What can be an issue in this as it is not displaying the home screen

1 Like
2

Do you have some code to show? There is not much anyone can do based on the information you provided

3

Yes. sure

App.tsx

<IonReactRouter>
  <IonRouterOutlet>
    <Route path="/login" component={Login} exact />
    <Route path="/home" component={Home} exact />
  </IonRouterOutlet>
</IonReactRouter >

Login.tsx(FC)

if(loginSuccess){
      console.log('sending home');
      history.replace('/home');
}

Home.tsx (FC)

useIonViewWillEnter(() => {console.log('WillEnter')});
useIonViewDiidEnter(() => {console.log('DidEnter')}) ;

In this case if I call history.replace() these lifecycle methods are not called if I use history.push() it calls both methods

Please let me know if you need some information about any specific part

4

Where is history coming from as a prop or you are defining it as from useHistory ?

5

As @rpatel001 hints at, make sure you are using the history prop passed to your component:

interface Props extends RouteComponentProps<{}> {
}
const MyComponent = ({ history, match }: Props) => { 
  // history.replace should work
}
1 Like
6

@max does this mean that we shouldn’t be using useHistory()

7

@aaronksaunders I have had issues with using useHistory in production while compiling to iOS thus I switched to history from the prop instead

8

I never use the history prop and haven’t had any problems which is why I asked, also if there is a issue with useHistory() then I believe an issue should be logged so that other people dont get confused and start to hack solutions unnecessarily

9

I honestly do not know. I’ve not used useHistory in my apps. However, I looked at our tests and we use useHistory so it should work fine: https://github.com/ionic-team/ionic-framework/blob/74af3cb50b089a6bd60d515158e03b18b86455b8/packages/react-router/test-app/src/pages/replace-action/Replace.tsx#L39

10

@rpatel001 I am using useHistory hook for this as it’s a functional component and directly allows this
const history = useHistory();

11

I was experiencing a similar issue where signing in worked the first time but on the second sign in the signin page was still displayed. Both pages could still be seen in the debug elements screen but “ion-page-hidden” class was attached to the wrong page.

In my case the error was on the signOut route I had specified routerDirection=“none” for some reason. When I changed “none” to “root” expected behaviour returned.

12

It looks like I’m getting the same problem, please check my example here: ionic-react-autofill-eczb9h - StackBlitz

13

I’ve tried this solution, but history ends up being undefined