在ionic-4 react中自动导航到所需页面

问题描述

我有一个页面，上面写着输入您的邮件ID来更改密码，在输入邮件ID并点击“提交”按钮后，我希望用户重定向到另一页，直到现在导航为止，我在做类似的事情

const redirect = useCallback(() => navigate("/login"),[navigate]);
redirect()

但是似乎它们只能在功能组件中使用，我想像在使用redux一样在我的动作创建器中重定向用户

这是我的代码

const ForgotPassword: React.FC<Props> = (props) => {
  const {
    register,handleSubmit,errors,control,setValue,getValues,} = useForm();
  const { navigate } = useContext(NavContext);
  const [email,setEmail] = useState("");
  const dispatch = usedispatch();

  const modal = useSelector((state: RootState) => {
    return { modal: state.modal };
  });
  const error = useSelector((state: RootState) => {
    return { error: state.error.iserror };
  });

  const onSubmit = (data: any) => {
    console.log(errors.keys);
    console.log(data);
    dispatch(changePassword(data.email));

  };
  const redirect = useCallback(() => navigate("/set-password"),[navigate]);
  return (
    <div>
      <Layout title={"Forgot Password"} backButton={false} backHref={""} />
      <IonContent>
        <div className="forgot-content">
          <form onSubmit={handleSubmit(onSubmit)}>
            <IonItem>
           
              <IonLabel position="stacked" className="otpMail">
                Email
              </IonLabel>

              <Controller
                render={({ onChange,onBlur,value }) => (
                  <IonInput
                    placeholder="Enter your email"
                    onIonChange={onChange}
                  />
                )}
                control={control}
                name="email"
                defaultValue=""
                rules={{
                  required: true,pattern: {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,message: "Error",},}}
              />
              {_.get("email.type",errors) === "required" && (
                <p className="errorWarning">This field is required</p>
              )}
              {_.get("email.type",errors) === "pattern" && (
                <p className="errorWarning">Email address is not valid</p>
              )}
            </IonItem>

            <div className="verifyButton">
              <IonButton type="submit" expand="block">
                Get OTP
              </IonButton>
            </div>
          </form>
        </div>
      </IonContent>
    </div>
  );
};

export default ForgotPassword;

action creater.js

export const changePassword = (email: string) => async (dispatch: any) => {
  axios.post("http://localhost:4000/change_password",email).then((res) => {
    console.log(res);
    if (res.data.status == 200) {
      dispatch({
        type: CHANGE_PASSWORD,payload: res.data.msg,});


     /// I want to redirect user at this point to '/set-password'///


    } else if (res.data.status == 600) {
      dispatch({
        type: SHOW_MODAL_Failed_TASK,});
    } else {
      dispatch(errorActions());
    }
  });
};

App.tsx

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet id="menu">
        <Route path="/signup" component={Signup} exact={true} />
        <Route path="/" component={Home} exact={true} />
        <Route path="/verify" component={Verify} exact={true} />
        <Route path="/login" component={Login} exact={true} />
        <Route
          path="/forgot-password"
          component={forgotPassword}
          exact={true}
        />
        <Route path="/set-password" component={setPassword} exact={true} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;

Index.tsx

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,document.getElementById("root")
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）