Как вы можете вернуть Redirect с помощью React Router? - PullRequest
Новая
       10

Как вы можете вернуть Redirect с помощью React Router?

0 голосов
/ 08 апреля 2020

Я немного новичок в React.

Я пытаюсь создать условное перенаправление, поэтому я написал функцию (errorCapture), в которой один результат должен вызвать перенаправление. Я возвращаю оператор обратно дочернему компоненту (ErrorOrReroute) внутри оператора return в моем функциональном компоненте в надежде, что это приведет к изменению страницы. Нет такой удачи!

  • Я знаю, что маршрут работает при других обстоятельствах.
  • Существует console.log ('redirect'); рядом с возвращаемым оператором в функции, которая отображается, как и ожидалось, поэтому я знаю, что функция работает должным образом.
  • В консоли нет других сообщений об ошибках.

Любая помощь будет принята с благодарностью. Спасибо !!

(Дополнительный вопрос: можно ли писать компонент полностью внутри кода для другого компонента? Будет ли это работать? Считается ли это грязным кодированием, , если я могу быть уверен в этом? не нужно будет использовать в другом месте ? Спасибо.) 

import PropTypes from 'prop-types';
import AuthContainer from './auth-container';
import { Button, Form, Message, Segment } from 'semantic-ui-react';
import { NavLink, useParams, Redirect } from 'react-router-dom';
import { withFormik } from 'formik';
import { PasswordResetConfirmService } from '../../utils/api/auth/auth.js';
import { mapFormError, NonFieldErrors } from '../../modules/forms';
import { t } from 'ttag';


let uidString = '';
let tokenString = '';
let executed = false;


const PasswordResetConfirmPage = ({ logged, values, handleChange, handleBlur, handleSubmit, isSubmitting, errors }) => {
  const { token, uid } = useParams();
  uidString = uid;
  tokenString = token;

  const ErrorOrReroute = () => {
    const errorCapture = () => {
      if (Object.keys(errors).length === 0) return false;
      if (Object.keys(errors).includes('uid') || Object.keys(errors).includes('token')) return true;
    };

    if (logged && !errorCapture()) {
      console.log('redirect');
      return <Redirect to={{ pathname: '/' }} />;
    } else if (executed && errorCapture()) {
      return (
        <Message negative>
          {'Password update failed :( Please request another password-reset email.'}
        </Message>
      );
    } else return null;
  };

  return (
    <AuthContainer title={t`Reset Password`}>

      <Form size="large" onSubmit={handleSubmit}>
        <Segment stacked>
          <Form.Input fluid icon="lock" iconPosition="left" placeholder={t`New Password`} type="password" name="new_password1" onChange={handleChange} onBlur={handleBlur} value={values.new_password1} error={mapFormError(errors, 'new_password1')} />
          <Form.Input fluid icon="lock" iconPosition="left" placeholder={t`Repeat New Password`} type="password" name="new_password2" onChange={handleChange} onBlur={handleBlur} value={values.new_password2} error={mapFormError(errors, 'new_password2')} />
          <NonFieldErrors errors={errors} />
          <Button primary fluid size="large" type="submit" loading={isSubmitting} disabled={isSubmitting} > {' '} {t`Confirm New Password`}{' '} </Button>
          <ErrorOrReroute />
        </Segment>
      </Form>

      <Message> {' '} {t`Know your password?`} &nbsp; <NavLink to="/login">{t`Login`}</NavLink>{' '} </Message>

    </AuthContainer>
  );
};

const withRegistrationErrors = withFormik({
  mapPropsToValues: () => ({ new_password1: '', new_password2: '', uid: '', token: '' }),
  handleSubmit: (values, { props, setSubmitting, setErrors }) => {
    values.uid = uidString;
    values.token = tokenString;
    executed = true;
    PasswordResetConfirmService(values)
      .then(() => {
        setSubmitting(false);
        props.toggleLoggedState();
      })
      .catch(errors => {
        setErrors(errors);
      });
  }
});

PasswordResetConfirmPage.propTypes = {
  values: PropTypes.object,
  handleChange: PropTypes.func,
  handleBlur: PropTypes.func,
  handleSubmit: PropTypes.func,
  isSubmitting: PropTypes.bool,
  errors: PropTypes.object,
  email: PropTypes.string,
  toggleLoggedState: PropTypes.func,
  logged: PropTypes.bool
};

export default withRegistrationErrors(PasswordResetConfirmPage);```

1 Ответ

1 голос
/ 13 апреля 2020

Я бы рекомендовал использовать history для изменения реализации условного перенаправления здесь:

Сделайте это, добавив useHistory к вашему react-router-dom импорту следующим образом: 

import { NavLink, useParams, useHistory } from 'react-router-dom';
// You won't need Redirect anymore

Затем в const { token, uid } = useParams(); добавьте эту строку: 

const history = useHistory()

Затем, наконец, замените <Redirect to={{ pathname: '/' }} /> на: 

return history.push('/')

ИЛИ 

return history.replace('/')

Вы можете прочитать Узнайте больше о каждом из них и решите, какой из них зависит от ваших будущих вариантов использования, но сейчас любой из этих вариантов решит вашу проблему здесь.

Относительно вашего побочного вопроса. То, что вы делаете, действительно грязное кодирование, вы должны передавать переменные через параметры функции. Не хранить эти значения глобально в вашем файле, как вы это сделали сейчас.

...