Comment faire une redirection interne dans reactjs?

Henrydoe

Je suis un peu nouveau pour réagir et je me demandais comment rediriger en interne vos pages dans reactjs. J'ai deux pages appelées register et register2. Dans la page d'inscription, je vérifie simplement si l'e-mail existe dans la base de données ou non et s'il n'existe pas, il redirige vers la page register2 pour créer le compte complet avec nom d'utilisateur et mot de passe. Cependant, dans la barre d'adresse, cela semble un peu moche de montrer quelque chose comme register2. Je me demandais donc s'il y avait un moyen par lequel je peux rediriger en interne sans changer l'adresse dans la barre d'adresse pour register2 afin qu'il reste comme registre tout au long du processus de création de compte.

J'ai créé un code et une boîte pour montrer le problème

register.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;

register2.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);
Lelouch

vous pouvez créer un composant parent pour register et register2 et y stocker votre logique dans quel composant afficher

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

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

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

Articles connexes

Comment faire une "redirection interne" dans Tornado?

Dziga Vertov Je porte une application Web multi-locataire vers Python / Tornado. Disons que chaque site locataire a deux pages: "/ foo" et "/ bar". Jusqu'ici, si facile avec Handlers. Cependant, les locataires peuvent choisir le contenu à afficher sur leur pag

Comment faire une simple redirection dans Laravel?

Polaire Borut J'ai une fonction à Laravel. À la fin, je veux rediriger vers une autre fonction. Comment faire ça à Laravel? J'ai essayé quelque chose comme: return redirect()->route('listofclubs'); Ça ne marche pas. Le parcours pour "listofclubs" est: Route::

Comment faire une redirection?

MrAndy Comment rediriger de http://127.0.0.1:8000/accounts/signin/ vers http://127.0.0.1:8000/profile/ avec HttpResponseRedirect Hayden Eastwood En supposant que vous avez correctement configuré votre fichier urls.py, il devrait s'agir simplement de: HttpRes

comment faire une double redirection sur une ligne dans bash?

Volumétrique Je voudrais exécuter du, et rediriger le stdout vers un fichier et stderr vers un autre fichier. J'ai la ligne: du -ah / | sort -h >/home/username/stdout.txt 2>/home/username/stderr.txt Je sais que cela devrait toujours produire des erreurs p

Comment faire une sélection interne dans linq ?

Lidprogsky J'ai une table de base de données appelée Customers. J'exécute le SQL suivant pour obtenir des informations sur le premier et le deuxième client : select FirstCustomerName, SecondCustomerName, * from Customers where FirstCustomerName = SecondCustom

Comment faire une requête POST via Redirection dans mvc?

Nouveau À partir du contrôleur, existe-t-il un moyen d'envoyer une requête POST à un domaine spécifique avec un paramètre? Ce que je veux archiver ressemble à ceci: public ActionResult Index() { Redirect("https://www.anothersite.com", new { s = "abc" }); }

Comment faire une redirection 302 dans grpc-gateway

Espoir similaire: J'utilise grpc-gateway pour héberger un serveur HTTP hors de mes définitions proto. Cela fonctionne très bien dans l'ensemble. Cependant, pour un point de terminaison spécial, au lieu de renvoyer une valeur, je souhaite effectuer une redirect

comment faire une redirection http de chemin absolu dans golang

Carter2000 Je lisais le code source goto , et j'ai trouvé le code ci-dessous dans goto / talk / 0 / main.go : http.Redirect(w, r, url, http.StatusFound) Selon le contexte, urlétait un chemin absolu, et une redirection de chemin absolu était attendue. Mais com