Navigieren mit Reagieren Router

Question

Ich möchte auf meine Home-Route umleiten, nachdem ich meine Axios-Anfrage an die API gesendet und eine gültige Antwort gesammelt habe. Wie man sehen kann, versuche ich den Kontext zu verwenden, aber in diesem Fall erhalte ich den Fehler "Kontext ist undefiniert". Wie kann ich in diesem Fall zu meiner Heimstrecke navigieren? Ich habe versucht mit history.push, aber das scheint auch nicht zu funktionieren. Irgendwelche Ideen würden sehr geschätzt werden?

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

Routen sollten immer oberhalb aller Ihrer Komponenten (oder Container) liegen. Wenn eine Komponente "innerhalb" des Routers ist (in Ihrem Fall BrowserRouter), erhält sie Zugriff auf ihren Kontext.

Auch haben Sie innerhalb Render-Funktion von einem anderen, die überhaupt keinen Sinn macht.

So etwas wie dies funktionieren soll:

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; 

Und natürlich Komponente bewegen SignUp Datei Eigenständig das Projekt sauber und gut strukturiert zu halten.