javascript - React Login with Redirect on callback - Stack Overflow

admin管理员组

文章数量:1425707

I'm new to react and struggling to redirect the user in a demo app to a default page after they submit the login form. I'm not entirely sure why return <Redirect to="/default" />; isn't doing anything.

Code Sandbox

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Form from "./Form";
import Default from "./default";

const App = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/default" ponent={Default} />
          <Route path="/" ponent={Form} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

Form.jsx

import React from "react";
import useForm from "./useForm";
import validate from "./LoginFormValidationRules";
import { Redirect } from "react-router-dom";

const Form = () => {
  const { values, errors, handleChange, handleSubmit } = useForm(
    login,
    validate
  );

  function login() {
    console.log("logged in");
    return <Redirect to="/default" />;
  }

  return (
    <div className="section is-fullheight">
      <div className="container">
        <div className="column is-6 is-offset-3">
          <div className="box">
            <form onSubmit={handleSubmit} noValidate>
              <div className="field">
                <label className="label">Email Address</label>
                <div className="control">
                  <input
                    autoComplete="off"
                    className={`input ${errors.email && "is-danger"}`}
                    type="email"
                    name="email"
                    onChange={handleChange}
                    value={values.email || ""}
                    required
                  />
                  {errors.email && (
                    <p className="help is-danger">{errors.email}</p>
                  )}
                </div>
              </div>
              <div className="field">
                <label className="label">Password</label>
                <div className="control">
                  <input
                    className={`input ${errors.password && "is-danger"}`}
                    type="password"
                    name="password"
                    onChange={handleChange}
                    value={values.password || ""}
                    required
                  />
                </div>
                {errors.password && (
                  <p className="help is-danger">{errors.password}</p>
                )}
              </div>
              <button
                type="submit"
                className="button is-block is-info is-fullwidth"
              >
                Login
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Form;

useForm.jsx

import { useState, useEffect } from "react";

const useForm = (callback, validate) => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors]);

  const handleSubmit = event => {
    if (event) event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };

  const handleChange = event => {
    event.persist();
    setValues(values => ({
      ...values,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
    errors
  };
};

export default useForm;

I'm new to react and struggling to redirect the user in a demo app to a default page after they submit the login form. I'm not entirely sure why return <Redirect to="/default" />; isn't doing anything.

Code Sandbox

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Form from "./Form";
import Default from "./default";

const App = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/default" ponent={Default} />
          <Route path="/" ponent={Form} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

Form.jsx

import React from "react";
import useForm from "./useForm";
import validate from "./LoginFormValidationRules";
import { Redirect } from "react-router-dom";

const Form = () => {
  const { values, errors, handleChange, handleSubmit } = useForm(
    login,
    validate
  );

  function login() {
    console.log("logged in");
    return <Redirect to="/default" />;
  }

  return (
    <div className="section is-fullheight">
      <div className="container">
        <div className="column is-6 is-offset-3">
          <div className="box">
            <form onSubmit={handleSubmit} noValidate>
              <div className="field">
                <label className="label">Email Address</label>
                <div className="control">
                  <input
                    autoComplete="off"
                    className={`input ${errors.email && "is-danger"}`}
                    type="email"
                    name="email"
                    onChange={handleChange}
                    value={values.email || ""}
                    required
                  />
                  {errors.email && (
                    <p className="help is-danger">{errors.email}</p>
                  )}
                </div>
              </div>
              <div className="field">
                <label className="label">Password</label>
                <div className="control">
                  <input
                    className={`input ${errors.password && "is-danger"}`}
                    type="password"
                    name="password"
                    onChange={handleChange}
                    value={values.password || ""}
                    required
                  />
                </div>
                {errors.password && (
                  <p className="help is-danger">{errors.password}</p>
                )}
              </div>
              <button
                type="submit"
                className="button is-block is-info is-fullwidth"
              >
                Login
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Form;

useForm.jsx

import { useState, useEffect } from "react";

const useForm = (callback, validate) => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
      callback();
    }
  }, [errors]);

  const handleSubmit = event => {
    if (event) event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };

  const handleChange = event => {
    event.persist();
    setValues(values => ({
      ...values,
      [event.target.name]: event.target.value
    }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
    errors
  };
};

export default useForm;

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Dec 13, 2019 at 20:06 Charles L. asked Dec 13, 2019 at 19:41 Charles L.Charles L. 1,98022 gold badges3939 silver badges6161 bronze badges 5

• From where is login() called? – ghchoi Commented Dec 13, 2019 at 20:22
• @GyuHyeonChoi login() is the callback function – Charles L. Commented Dec 13, 2019 at 20:24
• So it seems not a full code. I think it is very unfamiliar (at least with me) to return something from callback function. – ghchoi Commented Dec 13, 2019 at 20:26
• @GyuHyeonChoi Im still fairly new to react. Visit the CodeSandbox to see the current working version – Charles L. Commented Dec 13, 2019 at 20:27
• <Redirect to="/default" /> block should be somewhere in Form/return. I think... – ghchoi Commented Dec 13, 2019 at 20:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I updated my solutions.

import React, {useState} from "react";
import useForm from "./useForm";
import validate from "./LoginFormValidationRules";
import { Redirect } from "react-router-dom";

const Form = () => {
  const { values, errors, handleChange, handleSubmit } = useForm(
    login,
    validate
  );

  const[loggedIn, setLoggedIn] = useState(false);

  function login() {
    console.log("logged in");
    setLoggedIn(true);
    return <Redirect to="/default" />;
  }

  return (
    <div className="section is-fullheight">
      {
        loggedIn && (
          <Redirect to="/default" />
        )
      }
      <div className="container">
        <div className="column is-6 is-offset-3">
          <div className="box">
            <form onSubmit={handleSubmit} noValidate>
              <div className="field">
                <label className="label">Email Address</label>
                <div className="control">
                  <input
                    autoComplete="off"
                    className={`input ${errors.email && "is-danger"}`}
                    type="email"
                    name="email"
                    onChange={handleChange}
                    value={values.email || ""}
                    required
                  />
                  {errors.email && (
                    <p className="help is-danger">{errors.email}</p>
                  )}
                </div>
              </div>
              <div className="field">
                <label className="label">Password</label>
                <div className="control">
                  <input
                    className={`input ${errors.password && "is-danger"}`}
                    type="password"
                    name="password"
                    onChange={handleChange}
                    value={values.password || ""}
                    required
                  />
                </div>
                {errors.password && (
                  <p className="help is-danger">{errors.password}</p>
                )}
              </div>
              <button
                type="submit"
                className="button is-block is-info is-fullwidth"
              >
                Login
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Form;

But I wanna to say that there are some solutions to implement it. Above one is the one of them. please try to use this.

本文标签： javascriptReact Login with Redirect on callbackStack Overflow