Reactjs onSubmit按钮未重定向到配置文件组件页面

因此，我希望我的提交按钮从注册直接到我的个人资料页在我的反应应用程序。但我无法让它与网上给出的建议协同工作。我想知道我的代码中有哪些错误。 我希望能够单击“注册”按钮，并能够访问我的应用程序的/profile路径。我不知道为什么它不工作，而且它在任何地方都没有显示任何错误，现在它只是去我的特快专递路线。 sign-up.component.js

import React, { Component } from "react";
import { Redirect } from 'react-router';
import { withRouter } from 'react-router';

export default class SignUp extends Component {
    constructor(props){
        super(props)
        this.state = {
            firstName: '',
            lastName: '',
            email: '',
        }
    }
    onChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
      }

  onSubmit = (e) => {
        e.preventDefault();
        const {firstName, lastName, email} = this.state;

        fetch('http://localhost:9000/users/new', {
        method: "POST",
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify(this.state)
    })
    .then((result) => result.json())
    .then((info) => {console.log(info)})
    this.props.history.push('/profile');    }

render() {
        return (
            <form method='POST' action='http://localhost:9000/users/new'>
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label>First name</label>
                    <input type="text" className="form-control" placeholder="First name" name ="firstName"/>
                </div>

                <div className="form-group">
                    <label>Last name</label>
                    <input type="text" className="form-control" placeholder="Last name" name="lastName" />
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" className="form-control" placeholder="Enter email" name="email" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" />
                </div>

                <button type="submit" className="btn btn-primary btn-block" onClick={this.onSubmit}>Sign Up</button>
                
                <p className="forgot-password text-right">
                    Already registered <a href="#">sign in?</a>
                </p>
            </form>
        );
    }

import React，{Component}来自“React”；
从“react router”导入{Redirect}；
从“react router”导入{withRouter}；
导出默认类注册扩展组件{
建造师（道具）{
超级（道具）
此.state={
名字：''，
姓氏：“”，
电子邮件：“”，
}
}
onChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
}
onSubmit=（e）=>{
e、 预防默认值（）；
const{firstName，lastName，email}=this.state；
取（'http://localhost:9000/users/new', {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（this.state）
})
.then（（result）=>result.json（））
.then（（info）=>{console.log（info）}）
this.props.history.push（'/profile'）；}
render（）{
返回(
注册
名字
姓
电子邮件地址
密码
注册

已注册

);
}

App.js

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Login from "./components/login.component";
import SignUp from "./components/sign-up.component";
import Profile from "./components/profile";

function App() {
  return (<Router>
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/sign-in"}>Code Process Reviews</Link>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-in"}>Login</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Login} />
            <Route path="/sign-in" component={Login} />
            <Route path="/sign-up" component={SignUp} />
            <Route path="/profile" component={Profile} />
          </Switch>
        </div>
      </div>
    </div></Router>
  );
}

export default App;

从“React”导入React；
导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“/components/Login.component”导入登录名；
从“/components/sign-up.component”导入注册；
从“/components/Profile”导入配置文件；
函数App（）{
返回(
代码过程评审


登录


注册


);
}
导出默认应用程序；

您不能在箭头函数中使用

此

将箭头语法更改为正常

---

从

onSubmit（e）=>{}

到

函数onSubmit（e）{}

而不是使用history.push设置重定向状态标志

e、 g

this.state={
...
url:“”，
}
....
//网络响应后
this.setState（{url:'/profile'}）；
//和在组件中
{this.state.url？：null}

    this.state = {
       ...
       url: '',
    }
    
    ....
    
    // After network response 
    this.setState({url: '/profile'});
    
    
    // And in Component
    { this.state.url ? <Redirect to={this.state.url} /> : null }