Navigating using react router

Question

I want to redirect to my home route upon submitting my axios request to the api and gathering a valid response. As can be seen, Im trying to use context but in this case i get an error "context is undefined". How can i navigate to my home route in this case? I tried using history.push but that does not seem to work either. Any ideas would be much appreciated?

import React, {Component} from 'react'
import axios from 'axios'
import Home from './Home'
import {
  BrowserRouter,
  Link,
  Route
} from 'react-router-dom'

class SignUp extends Component {

  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: ''
    };
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick = () => {
    axios
      .post('http://localhost:9000/signup',{
        email: this.state.email,
        password: this.state.password
      }).then(function(response){
        console.log(response.data.success)
        this.context.router.push('/home');
      })
  }
  render(){
    return(
      <BrowserRouter>
        <Route path="/" render={() => (
          <div>
            <h1> Sign Up</h1>
            <input name="email" placeholder="enter your email" onChange={e => this.handleChange(e)}/>
            <br/>
            <input name="password" placeholder="enter your password" onChange={e => this.handleChange(e)}/>
            <br/>
            <button onClick={() => this.handleClick()}>submit</button>
            <Route exact path="/home" component={Home}/>
          </div>
        )}/>
      </BrowserRouter>
    )
  }
}

SignUp.contextTypes = {
  router: React.PropTypes.func.isRequired
};

export default SignUp

Answer 1

Routes should be always level above of all your components (or containers). Then, when a component is "inside" router (in your case BrowserRouter) it will gain access to its context.

Also you have inside render function of another wich does not make sense at all.

So something like this should work:

import React, {Component} from 'react'
import axios from 'axios'
import Home from './Home'
import {
  BrowserRouter,
  Link,
  Route
} from 'react-router-dom'

class SignUp extends Component {

  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: ''
    };
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick = () => {
    axios
    .post('http://localhost:9000/signup',{
        email: this.state.email,
        password: this.state.password
    }).then(function(response){
        console.log(response.data.success)
        this.context.router.push('/home');
    })
  }

  render(){
    return(
      <div>
      <h1> Sign Up</h1>
      <input name="email" placeholder="enter your email" onChange={e => this.handleChange(e)}/>
      <br/>
      <input name="password" placeholder="enter your password" onChange={e => this.handleChange(e)}/>
      <br/>
      <button onClick={() => this.handleClick()}>submit</button>
      </div>
      )
   }
}

SignUp.contextTypes = {
  router: React.PropTypes.func.isRequired
}; 

class App extends Component {
  render() {
    return(
      <BrowserRouter>
        <Route path="/" component={SignUp} />
        <Route exact path="/home" component={Home}/>
      </BrowserRouter>)
    }
 }

 export default App;

And of course move SignUp component to standalone file to keep the project clean and well structured.