提交表单后如何将用户重定向到另一个页面？答案

【问题标题】：How do I redirect user to another page after submit the form?提交表单后如何将用户重定向到另一个页面？
【发布时间】：2021-09-07 18:02:35
【问题描述】：

我想在 React JavaScript 中提交表单后重定向用户，例如当用户提交表单时，他/她重定向到 google.com 或其他带有他/她在输入字段中输入的信息的 URL。我用一个提交和提交按钮创建了简单的内容。

这是我的示例代码

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
  state = {
    firstName: '',
    showName: false
  }
  inputHandler = (e) => {
    let updatedName = e.target.value;
    this.setState({ firstName: updatedName });
    //console.log(updatedName);  
  }
  onSubmitHandler = (e) => {
    e.preventDefault();
    this.setState({
      showName: true
    });
  }
  render() {
    return (
      <div>
        <form
          onSubmit={this.onSubmitHandler}>
          <label>Enter the Name</label>
          <input type="text"
            name="firstName" onChange={this.inputHandler} value=
            {this.state.firstName} />
          <button type="submit" onClick={this.onSubmitHandler}>Submit</button>
          {this.state.showName && <p>"FirstName: " {this.state.firstName}</p>}
        </form>
      </div>
    );
  }
}
export default (App);

【问题讨论】：

这个问题重复了，见here
redirect to another page after submitting a form的可能重复
不，@SaeedZhiany
@Raj 如果您认为您的问题有一些新问题要问，而上述问题不包含，请在您的问题中提供更多详细信息。你问的已经和其他问题一样了，祝你好运！

标签： javascript reactjs

【解决方案1】：

您可以使用 this.props.history.push 方法进行重定向。

  onSubmitHandler = (e) => {
    e.preventDefault();
   this.props.history.push('/dashboard')
  }

【讨论】：

【解决方案2】：

onSubmitHandler = (e) => {
    e.preventDefault();
    this.setState({
      showName: true
    });
    window.location.href = "someurl/somepage?var1="+this.state.var1+"&var2="+this.state.var2 + "......";
  }

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation would greatly improve its long-term value 通过展示为什么这是一个很好的解决问题的方法，并且会使其对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。
需要注意的一点：此方法仅限于仅GET请求。 POST等其他请求方式无法执行。

【解决方案3】：

Checking(event) {
    event.preventDefault();
    if (this.state.username === "" || this.state.password === "") {
      alert("Fields are required");
      return;
    }
    if (this.state.username == "subrata" && this.state.password === "1234") {
      this.props.history.push('/adminpanel')
      return;
    }else{
      alert("Login Failed ! . Check Username and Password.")
    }
     
    console.log(`${this.state.username}`)
}

【讨论】：

【解决方案4】：

使用 vanilla javascript 提交表单并有条件地重定向到您选择的网址

这样，您必须在提交表单时手动将输入字段附加为查询参数。
当您有一个大型表单要提交到某个 url 时，这种方法真的很出色。
它支持所有http方法，如get post等。

onSubmitHandler = (e) => {
    e.preventDefault();
    this.setState({
      showName: true
    });
    if(this.state.showName){
      // submitting the form conditionally with javascript
      document.getElementById("nameForm").submit();
    }
  }
  render() {
    return (
      <div>
        <form
          onSubmit={this.onSubmitHandler}
          id="nameForm"
          action="https://google.com"
          method="GET"
        >
          <label>Enter the Name</label>
          <input type="text"
            name="firstName" onChange={this.inputHandler} value=
            {this.state.firstName} />
          <button type="submit" onClick={this.onSubmitHandler}>Submit</button>
          {this.state.showName && <p>"FirstName: " {this.state.firstName}</p>}
        </form>
      </div>
    );
  }

【讨论】：