Как сделать внутреннее перенаправление в reactjs? - PullRequest
Новая
       5

Как сделать внутреннее перенаправление в reactjs?

1 голос
/ 05 февраля 2020

Я новичок, чтобы реагировать, и мне было интересно, как внутренне перенаправить ваши страницы в reactjs. У меня есть две страницы, называемые register и register2. На странице регистрации я просто проверяю, существует ли электронное письмо в базе данных или нет, и если оно не существует, оно перенаправляет на страницу register2 для создания полной учетной записи с именем пользователя и паролем. Однако в адресной строке выглядит некрасиво, чтобы показать что-то вроде register2. Поэтому мне было интересно, есть ли способ, с помощью которого я могу внутренне перенаправить, не меняя адрес в адресной строке на register2, чтобы он оставался регистром на протяжении всего процесса создания учетной записи.

Я создал codeandbox для отображения проблемы

регистр. js

import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "@material-ui/core/TextField";

import * as Yup from "yup";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      <Link color="inherit" href="sad">
        New1
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  },
  form: {
    width: "100%",
    marginTop: theme.spacing(1)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

const Reg = props => {
  const classes = useStyles();
  const [loginError, setLoginError] = useState("");
  const [changed, setChanged] = useState(false);
  const [newpage, setNew] = useState(false);
  const handleSubmit = async (values, { setSubmitting }) => {
    const { email } = values;

    var body = {
      email: email
    };
    console.log(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };
    const url = "/api/emailcheck";
    try {
      const response = await fetch(url, options);
      const text = await response.text();
      setSubmitting(false);
      setChanged(false);
      setNew(true);
      console.log(text);
      if (newpage) {
        props.history.push({
          pathname: "/register2",
          state: { email }
        });
        // props.history.push(`/register2/${email}`);
      } else if (text === "exists") {
        props.history.push(`/`);
      } else {
        setLoginError("Email is invalid");
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Formik
      initialValues={{ email: "" }}
      onSubmit={handleSubmit}
      //********Using Yup for validation********/

      validationSchema={Yup.object().shape({
        email: Yup.string()
          .email()
          .required("Required")
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit
        } = props;
        return (
          <>
            <Container component="main" maxWidth="xs">
              <CssBaseline />
              <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                  <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                  Sign in
                </Typography>
                <form
                  className={classes.form}
                  onSubmit={handleSubmit}
                  noValidate
                >
                  <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    id="email"
                    value={values.email}
                    label="Email Address"
                    name="email"
                    autoComplete="email"
                    onChange={e => {
                      setChanged(true);
                      handleChange(e);
                    }}
                    onBlur={handleBlur}
                    className={errors.email && touched.email && "error"}
                  />
                  {errors.email && touched.email && (
                    <div className="input-feedback" style={{ color: "red" }}>
                      {errors.email}
                    </div>
                  )}
                  {!changed && loginError && (
                    <div style={{ color: "red" }}>
                      <span>{loginError}</span>
                    </div>
                  )}

                  <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    disabled={isSubmitting}
                  >
                    Next
                  </Button>
                  <Grid container justify="flex-end">
                    <Grid item>
                      <Link href="/" variant="body2">
                        Already have an account? Sign in
                      </Link>
                    </Grid>
                  </Grid>
                </form>
              </div>
              <Box mt={5}>
                <Copyright />
              </Box>
            </Container>
          </>
        );
      }}
    </Formik>
  );
};

export default Reg;

регистр2. js

import React, { useState } from "react";
import { Formik } from "formik";
import TextField from "@material-ui/core/TextField";
import { withRouter, useHistory } from "react-router-dom";
import * as Yup from "yup";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import Link from "@material-ui/core/Link";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";

function Copyright() {
  return (
    <Typography va riant="body2" color="textSecondary" align="center">
      <Link color="inherit" href="sad">
        New
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main
  },
  form: {
    width: "100%",
    marginTop: theme.spacing(1)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

const Reg2 = props => {
  const classes = useStyles();
  const [loginError, setLoginError] = useState("");
  const history = useHistory();
  const [changed, setChanged] = useState(false);
  const handleSubmit = async (values, { setSubmitting }) => {
    const { username, password } = values;
    var body = {
      username: username,
      password: password,
      email: history.location.state.email
    };
    console.log(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };
    const url = "/api/register";
    try {
      const response = await fetch(url, options);
      const text = await response.text();
      setSubmitting(false);
      setChanged(false);
      console.log(text);
      if (text === "verifyemail") {
        props.history.push({
          pathname: "/verifyOtp",
          state: { email: body.email }
        });
        // props.history.push(`/verifyOtp/${username}`);
      } else {
        setLoginError("Username or Password is incorrect");
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Formik
      initialValues={{ username: "", password: "", confirmPassword: "" }}
      onSubmit={handleSubmit}
      //********Using Yup for validation********/

      validationSchema={Yup.object().shape({
        username: Yup.string().required("Required"),
        password: Yup.string()
          .required("No password provided.")
          .min(8, "Password is too short - should be 8 chars minimum.")
          .matches(/(?=.*[0-9])/, "Password must contain a number.")
          .matches(
            /(?=.*[●!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~])/,
            "Password must contain a symbol."
          ),
        confirmPassword: Yup.string()
          .required("Enter to confirm password")
          .oneOf([Yup.ref("password"), null], "Password do not match")
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit
        } = props;
        return (
          <>
            <Container component="main" maxWidth="xs">
              <CssBaseline />
              <div className={classes.paper}>
                <Avatar className={classes.avatar}>
                  <LockOutlinedIcon />
                </Avatar>
                <Typography component="h1" variant="h5">
                  Enter Info
                </Typography>
                <form
                  className={classes.form}
                  onSubmit={handleSubmit}
                  noValidate
                >
                  <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    id="username"
                    value={values.username}
                    label="username"
                    name="username"
                    autoComplete="username"
                    onChange={e => {
                      setChanged(true);
                      handleChange(e);
                    }}
                    onBlur={handleBlur}
                    className={errors.username && touched.username && "error"}
                  />
                  {errors.username && touched.username && (
                    <div className="input-feedback" style={{ color: "red" }}>
                      {errors.username}
                    </div>
                  )}
                  <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    name="password"
                    value={values.password}
                    label="Password"
                    type="password"
                    id="password"
                    onBlur={handleBlur}
                    autoComplete="current-password"
                    className={errors.password && touched.password && "error"}
                    onChange={e => {
                      setChanged(true);
                      handleChange(e);
                    }}
                  />
                  {errors.password && touched.password && (
                    <div className="input-feedback" style={{ color: "red" }}>
                      {errors.password}
                    </div>
                  )}
                  <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    name="confirmPassword"
                    value={values.confirmPassword}
                    type="password"
                    label="Confirm Password"
                    id="confirmPassword"
                    onBlur={handleBlur}
                    autoComplete="confirmPassword"
                    className={
                      errors.confirmPassword &&
                      touched.confirmPassword &&
                      "error"
                    }
                    onChange={e => {
                      setChanged(true);
                      handleChange(e);
                    }}
                  />
                  {errors.confirmPassword && touched.confirmPassword && (
                    <div className="input-feedback" style={{ color: "red" }}>
                      {errors.confirmPassword}
                    </div>
                  )}

                  {!changed && loginError && (
                    <div style={{ color: "red" }}>
                      <span>{loginError}</span>
                    </div>
                  )}
                  <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    disabled={isSubmitting}
                  >
                    Next
                  </Button>
                </form>
              </div>
              <Box mt={8}>
                <Copyright />
              </Box>
            </Container>
          </>
        );
      }}
    </Formik>
  );
};

export default withRouter(Reg2);

Ответы [ 3 ]

0 голосов
/ 05 февраля 2020

Первоначально показать компонент регистра или код такого рода. Вызовите API, если электронная почта существует, сохраните в ней значение флага и выполните условный рендеринг для другого компонента или кода register2.

Первоначально this.state.isEmailExist : false,

После вызова API изменить значение флага соответственно. Если true, то рендер Register2. 

const contents = if (!this.state.isEmailExist) {
        return (
            <Register />
        );
    } else {
        return (
            <Register2 />
        )
    }

return(
  <div>{contents}</div>
)
0 голосов
/ 05 февраля 2020

Возможно, вы ищете это 

window.open("https://www.youraddress.com","_self");

Убедитесь, что настроили проверку.

0 голосов
/ 05 февраля 2020

вы можете сделать родительский компонент для register и register2 и сохранить свои логики c там, в каком компоненте отображать 

function MyComponent() {
  const [email, setEmail] = useState(null)

  useEffect(() => {
    (async () => {
      const response = await yourApiCall()
      setEmail(response)
    })()
  }, [])

  return email ? <Register /> : <Register2 />
}
...