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

Question

因此，我希望Signup中的提交按钮将我引导到我的react应用程序中的配置文件页面。但我无法将其与网上给出的建议配合使用。我想知道我的代码中有哪些错误。我希望能够单击"注册"按钮，并能够访问我的应用程序的/profile路由。我不知道为什么它不起作用，它在任何地方都没有显示任何错误，它现在只是转到我的Express POST路由。注册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>
);
}

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;

Answer 1

不能在箭头函数中使用this将箭头语法更改为正常从onSubmit(e)=>{}到function onSubmit(e){}

Answer 2

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

例如

this.state = {
...
url: '',
}

....

// After network response 
this.setState({url: '/profile'});


// And in Component
{ this.state.url ? <Redirect to={this.state.url} /> : null }