Question

我正在用 React 做一个项目，但遇到了一个让我难住的问题。

我想在用户成功登录后重定向到 Google 页面，但我不知道如何重定向到另一个页面

这是我的代码，我无法重定向到 www.google.com。

如果有人有一些解决方案，如果你能帮助我，那就太好了

import React, { Component } from "react";
import url from "../ApiCall";
import Dashboard from "../DashBoard/Dashboard";
import LoginForm from "./LoginForm";
import styles from "../../styles/style.css";

export class Login extends Component {
    state = {
        status: "",
    };

    submitForm = (event) => {
        event.preventDefault();
        let form = event.target;
        let formObj = {
            email: form.email.value,
            password: form.password.value,
        };
        fetch(`${url}users/login`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            mode: "cors",
            body: JSON.stringify(formObj),
        })
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
                if (data.data) {
                    this.setState({ status: "Successful" });
                    form.reset();
                    alert("Login Successfully");
                } else {
                    console.error();
                }
            })
            .catch((err) => {
                alert(`${form.email.value}, Please try again :)`);
                alert(err);
                console.log(err);
            });
    };
    render() {
        return (
            <>
                {this.state.status === "Successful" ? (
                    /*Redirect to www.google.com*/
                ) : (
                    <form onSubmit={this.submitForm}>
                        <LoginForm />
                        <div className={styles["footer"]}>
                            <button type="submit" value="submit" className="btn">
                                Login
                            </button>
                            <button type="reset" value="reset" className="btn">
                                Reset
                            </button>
                        </div>
                    </form>
                )}
            </>
        );
    }
}

如果有人有解决方案请告诉我

Answer 1

如果你使用 React Router DOM，你可以简单地返回 <Redirect to="google.com" /> 组件。或者你可以做history.push('google.com');

Answer 2

试试这个：

 import React, { Component } from "react";
    import url from "../ApiCall";
    import Dashboard from "../DashBoard/Dashboard";
    import LoginForm from "./LoginForm";
    import styles from "../../styles/style.css";
    import { Route , withRouter} from 'react-router-dom';
    class Login extends Component {
        state = {
            status: "",
        };
    
        submitForm = (event) => {
            event.preventDefault();
            let form = event.target;
            let formObj = {
                email: form.email.value,
                password: form.password.value,
            };
            fetch(`${url}users/login`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                mode: "cors",
                body: JSON.stringify(formObj),
            })
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    console.log(data);
                    if (data.data) {
                        this.setState({ status: "Successful" });
                        form.reset();
                        alert("Login Successfully");
                    } else {
                        console.error();
                    }
                })
                .catch((err) => {
                    alert(`${form.email.value}, Please try again :)`);
                    alert(err);
                    console.log(err);
                });
        };
        render() {
            return (
                <>
                    {this.state.status === "Successful" ? (
                       this.props.history.push({
                            pathname: "www.google.com",
                          
                        })
                    ) : (
                        <form onSubmit={this.submitForm}>
                            <LoginForm />
                            <div className={styles["footer"]}>
                                <button type="submit" value="submit" className="btn">
                                    Login
                                </button>
                                <button type="reset" value="reset" className="btn">
                                    Reset
                                </button>
                            </div>
                        </form>
                    )}
                </>
            );
        }
    }
export default withRouter(Login) ;

登录后重定向到另一个页面

2 个答案: