Как перейти со страницы регистрации после отправки данных формы?

Question

Как мне перейти на следующую страницу в React.js после проверки отправки формы на страницу регистрации пользователя?Данные формы были отправлены с помощью axios.Я могу сделать метод POST для завершения регистрации пользователя, но не знает, как перейти к следующей странице / компоненту.

Я пробовал history.push () ... не работает!

import React, { Component } from 'react';
// import ReactDOM from "react-dom"
import axios from 'axios';
import './App.css';
// import Login from './Components/Login';
import Plan from './plans'
// import history from 'history';
import { browserHistory , Router, Route } from 'react-router';
// import { Router } from 'express';




class App extends Component {

  // plans(response) {
  //   return <div><Plan /></div>;
  // }


  constructor(props) {
    super(props)
    this.state = {

      fName: '',
      LName: '',
      MName: '',
      email: '',
      password: '',
      Time_stamp: '',
      Country: '',
      Mtype: '',
      num: '',
      enabled: ''
    }
  }

  handleclick = () => {
    document.getElementById('loginBackground').style.display = 'block';
    document.getElementById('inputForm').style.display = 'none';
  }


  changeHandler = event => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }


    submitHandler = event => {
    event.preventDefault()
    console.log(this.state)
    var usr = 'username';
    var pass = 'password';
    var basicAuth = 'Basic' + btoa(usr + ':' + pass)

    axios.post('https://localhost:8080/user',
      {
        'user': {
          'fName': this.state.fName,
          'LName': this.state.LName,
          'MName': this.state.MName,
          'email': this.state.email,
          'Time_stamp': '1569301698',
          'Country': this.state.Country,
          'Mtype': 'basic',
          'num': this.state.num,
          'enabled': false
        },
        'pwd': {
          'pwd': this.state.password
        }
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': + basicAuth
        },

      })

      .then(function (response) {
        console.log('Authenticated' + response.data);
        if (response.data === 'signup') {
          alert("User already exists");
        }
        else {
          // this.props.history.push(<Plan />);
          browserHistory.listen(location => {
            browserHistory.push('/');
           });
           const router = (
            <Router history={browserHistory}>
              <Route path = "/" component={Plan}>

              </Route>
            </Router>
           );
        }
      }).catch(function (error) {
        console.log('Error on Authentication' + error);
      });
  }


  render() {


    //   function emailValidate(emailAuth) {var emailAuth = this.state.email;
    //     var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    //       if (this.emailAuth.value.match(mailformat)) {
    //           alert("Proceed");
    //   }
    // }

    const { fName, LName, MName, email, password, Country, num } = this.state

    return (
      <div id="primaryDivision">

        <form id="inputForm" onSubmit={this.submitHandler}>

          <h4>sign up.</h4>
          <div>
            <input type="text" className="inputField" name="fName" value={fName} onChange={this.changeHandler} placeholder="First name"  required />
          </div>
          <div>
            <input type="text" className="inputField" name="LName" value={LName} onChange={this.changeHandler} placeholder="Last name"  required />
          </div>
          <div>
            <input type="text" className="inputField" name="MName" value={MName} onChange={this.changeHandler} placeholder="Middle name"   />
          </div>
          <div>
            <input type="email" className="inputField" name="email" value={email} onChange={this.changeHandler} onInput={this.emailValidate} placeholder="Email"  required />
          </div>
          <div>
            <input type="password" className="inputField" name="password" value={password} onChange={this.changeHandler} placeholder="Password"  required />
          </div>
          <div>
            <input type="text" className="inputField" name="Country" value={Country} onChange={this.changeHandler} placeholder="Country"  required />
          </div>
          <div>
            <input type="text" className="inputField" name="num" value={num} onChange={this.changeHandler} placeholder="Number"  required />
          </div>


          <button id="button" type="submit">Submit</button>


        </form>

        <button id="AlreadyRegisteredButton" onClick={this.handleclick}>Already registered ??</button>

        {/* <div id="loginBackground">


          <Login />


        </div> */}

      </div>
    )

  }

}

export default App