使用反應路由器導航

Question

我想在將axios請求提交給API並收集有效響應後重定向到我的家鄉路由。可以看出，我試圖使用上下文，但在這種情況下，我得到一個錯誤「上下文未定義」。在這種情況下，我如何導航到我的家鄉路線？我嘗試使用history.push，但似乎也沒有工作。任何想法將不勝感激？

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

路線應始終高於所有組件（或容器）的水平。然後，當一個組件是「內部」路由器（​​在你的情況BrowserRouter），它將獲得訪問其上下文。

此外，你有內部的渲染功能，另一個完全沒有意義。

所以這樣的事情應該工作：

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; 

當然舉動註冊組件，並以獨立的文件，以保持項目的清潔和良好的結構。