My page is not refreshing when i use history.push even though the URL changes

Question

I am using ionic and react with IonReactRouter for navigation. When I use history.push, it changes the URL but the page doesn't refresh on the change.

I've tried putting Switch inside the IonRouterOutlet. I've tried pushing the history in different parts of the code. Neither of those work...

If anyone has some advice, I'd appreciate it a lot!

App.js

interface StateProps {
  loadAllWorkouts: () => void;
}

const App: React.FC<StateProps> = (props: StateProps) => {
  return (
    <IonApp>
      <IonReactRouter>
        <SideDrawer />
        <IonRouterOutlet id="main">
            <Route exact path="/login" component={Login} />
            <Route exact path="/signup" component={SignUp} />

            <Route exact path="/workouts" component={WorkoutList} />
            <Route path="/workouts/:workoutId" component={WorkoutDetails} />
            <Route path="/start-workout/:workoutId" component={StartWorkout} />

            <Route exact path="/profile" component={Profile} />
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/goals" component={Goals} />

            <Redirect to="/login" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

Login.tsx

const Login: React.FC<InjectedFormProps> = (props: any) => {
  const submitForm = (values: any) => {
    const userData = {
      email: values.email,
      password: values.password,
    };
    props.onLogin(userData);

/******THIS IS WHERE I PUSH THE HISTORY TO A NEW URL*******/
    history.push("/workouts");
  };

  const { pristine, submitting, invalid, handleSubmit } = props;
  const { login } = props.loginInfo;

  return (
    <IonPage>
      <IonHeader className="ion-no-border ion-padding">
        <IonToolbar>
          <IonButton disabled strong size="large" fill="clear" expand="block">
            <IonIcon icon={lockClosedOutline} />
          </IonButton>
          <IonToolbar>
            <IonTitle className="ion-text-center" size="large">
              Login
            </IonTitle>
          </IonToolbar>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <form onSubmit={handleSubmit(submitForm)} noValidate>
          <IonGrid>
            <IonRow>
              <Field
                name="email"
                title="Email Address"
                type="text"
                id="email"
                autoComplete="email"
                pattern="email"
                required
                inputmode="email"
                component={ReduxFormInput}
              />
            </IonRow>
            <IonRow>
              <Field
                name="password"
                title="Password"
                type="password"
                id="password"
                required
                component={ReduxFormInput}
              />
            </IonRow>
          </IonGrid>
          <IonButton
            type="submit"
            expand="block"
            disabled={login.loading || pristine || invalid || submitting}
          >
            Sign In
            {login.loading && <IonLoading isOpen={login.loading} />}
          </IonButton>
          <IonButton fill="clear" href="signup">
            Don't have an account? Sign Up
          </IonButton>
          {/* {errors.general && <p>{errors.general}</p>} */}
        </form>
      </IonContent>
    </IonPage>
  );
};
/* ....other code ....*/

history.js

var createBrowserHistory = require("history").createBrowserHistory;

const history = createBrowserHistory();

export default history;

Answer 1

React Navigation

IonReactRouter uses the popular React Router library under the hood. ... Everything you know about routing using React Router carries over into Ionic React.

Specific to navigation

A programmatic option for navigation is using the history prop that React Router provides to the components it renders via routes.

history is a prop, so it must be destructured or otherwise accessed from the route props passed to your component.

const submitForm = (values: any) => {
  const userData = {
    email: values.email,
    password: values.password,
  };
  props.onLogin(userData);

  props.history.push("/workouts"); // <-- access history from provided route props
};

I see you are using Typescript so you'll likely need to also update your Login component interface.