React Router V4 <redirect>不会在提交表单时触发

Question

我有一个路由组件，它根据其模式中的提交表单是否已切换为true来重定向其render()。

Home.JS

import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom";

class Home extends Component {

    constructor(props) {
        super(props) 
        this.state = {
            dialogueOpen: false,
            loginMessage: '',
            name: '',
            password: '',
            newUsername: '',
            newPassword: '',
            returnedUser: undefined,
            registrationMessage: '',
            redirectToSignupSuccess: false
        }
        this.checkUniqueUsername = this.checkUniqueUsername.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.handleLogin = this.handleLogin.bind(this)
        this.handleOpen = this.handleOpen.bind(this)
        this.handleRegistration = this.handleRegistration.bind(this)   
    }

这是将redirectToSignupSuccess切换为true的方法。

handleRegistration = event => {
        //check that username and passwords aren't empty strings
        if (this.state.newUsername.length() > 0 && this.state.newPassword.length() > 0) {
            //check that the new username isn't already in the database
            this.checkUniqueUsername(this.state.newUsername)
            .then(isUnique => {
                console.log(isUnique)

                if (isUnique === true) {
                    //console.log("the username is unique")
                    axios.post('http://localhost:4242/createuser', {
                        username: this.state.newUsername,
                        password: this.state.newPassword
                        })
                        .then( (response) => {

                            console.log(response)
                            this.setState({redirectToSignupSuccess: true}, () => {
                                console.log(this.state.redirectToSignupSuccess)

                            })
                            //this.handleClose()
                        })
                        .catch((error) => {
                            console.log(error);
                        });
                }
            })
        }
        else {
            this.setState({registrationMessage: 
"Sorry, but we need a username and password for you to sign up"})

        }

        event.preventDefault();        
    }

render()

   render() {
        let isAuthed = localStorage.getItem("authorized");

        let redirectToSignupSuccess = this.state.redirectToSignupSuccess

        if (isAuthed === "true") {
            return (<Redirect to='/inner' />)
        }

        if (redirectToSignupSuccess === true) {
            return (<Redirect to='/signupsuccess' />)
        }

        return (
            <div>
            <h1 className="green home-logo">APPLi</h1>
            <div className="login-message">
                <h4>{this.state.loginMessage}</h4>
            </div>
            <form onSubmit={this.handleLogin} style={{ padding: 8 }}>
                <Grid container spacing={16} direction="row" justify="center">
                    <Grid item xs={2} >
                        <FormControl margin="normal">
                            <InputLabel htmlFor="component-simple">Name</InputLabel>
                            <Input id="component-simple" value={this.state.name}  onChange={this.handleChange('name')} />
                        </FormControl>
                    </Grid>
                    <Grid item xs={2} >
                        <FormControl margin="normal">
                            <InputLabel htmlFor="component-simple">Password</InputLabel>
                            <Input id="component-simple" value={this.state.password} onChange={this.handleChange('password')} />
                        </FormControl>
                    </Grid>
                    <Grid item xs={12}>
                        <Button  color="secondary" label="submit" type="Submit" variant="contained" >Log In</Button>
                    </Grid>
                </Grid>
            </form>
            <Button onClick={this.handleOpen} color="primary" variant="contained">Sign Up</Button>

            <Dialog open={this.state.dialogueOpen} onClose={this.handleClose}>
                <h2>Register for an account</h2>
                <form onSubmit={this.handleRegistration} style={{ padding: 8 }}>
                    <Grid container spacing={16}  justify="center">
                        <Grid item xs={6} >
                            <FormControl required={true}>
                                <InputLabel htmlFor="component-simple">Your Username</InputLabel>
                                <Input id="component-simple" value={this.state.newUsername} onChange={this.handleChange('newUsername')}/>
                            </FormControl>
                        </Grid>
                        <Grid item xs={6} >
                            <FormControl required={true}>
                                <InputLabel htmlFor="component-simple">Your Password</InputLabel>
                                <Input id="component-simple" value={this.state.newPassword} onChange={this.handleChange('newPassword')} />
                            </FormControl>
                        </Grid>
                        <Grid item xs={12}>
                            <p>{this.state.registrationMessage}</p>
                            <Button color="secondary" label="submit" type="Submit" variant="contained">Create Account</Button>          
                        </Grid>
                    </Grid>
                </form>
            </Dialog>   
        </div>)

App.js中的路由

render() {
    return (

      <Router>
        <div className="App">
          <div className="portfolioBar">
            <div className="arrowContainer">
              <a href="#"><FontAwesomeIcon icon="arrow-left" color="black" size="3x" /></a>
            </div>
          </div>
          <Route exact path="/" render={(props) => 
            <Home authorizeUser={this.authorizeUser} setCurrentUser={this.setCurrentUser} currentUser={this.state.currentUser}  {...props} />
          }/>
          <Route path="/signupsuccess" component={SignupSuccess} />
          <Route exact path="/inner" render={(props) => 
            <UserView currentUser={this.state.currentUser} currentUserId={this.state.currentUserId} handleLogout={this.handleLogout} {...props} />
          }/>
       </div>
      </Router>
    );
  }
}

export default App;

通常，在提交页面表单时，API应该将新的用户信息发送到数据库，并且他们应该重定向到/signupsuccess。取而代之的是，页面刷新了，并且没有对数据库进行api调用。我在表单上设置了event.preventDefault()，但是控制台闪烁了一系列错误消息，然后页面重置。我可能会缺少什么？