Моя страница не обновляется, когда я использую history.pu sh даже при изменении URL - PullRequest
Новая
       8

Моя страница не обновляется, когда я использую history.pu sh даже при изменении URL

1 голос
/ 02 августа 2020

Я использую ioni c и реагирую с помощью IonReactRouter для навигации. Когда я использую history.pu sh, он меняет URL-адрес, но страница не обновляется sh при изменении.

Я попытался поместить Switch в IonRouterOutlet. Я пробовал проталкивать историю в разные части кода. Ни одна из этих работ не работает ...

Если у кого-то есть совет, я был бы очень признателен!

Приложение. 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 ....*/

история. js

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

const history = createBrowserHistory();

export default history;

1 Ответ

1 голос
/ 02 августа 2020

React Navigation

IonReactRouter использует популярную библиотеку React Router под капотом. ... Все, что вы знаете о маршрутизации с использованием React Router, переносится в Ioni c React.

Specifi c в навигацию

Параметр programmati c для навигации использует свойство history, которое React Router предоставляет компонентам, которые он отображает через маршруты.

history - это свойство, поэтому оно должно быть деструктурировано или иначе доступ из свойств маршрута , переданных вашему компоненту. 

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
};

Я вижу, что вы используете Typescript, поэтому вам, вероятно, также потребуется обновить интерфейс компонента Login.

...