反応ルータを使ってナビゲートする

Question

私のAxiosリクエストをAPIに送信して有効な応答を収集すると、自分のホームルートにリダイレクトしたいと思う。見ての通り、Imはコンテキストを使用しようとしていますが、この場合は「コンテキストが定義されていません」というエラーが表示されます。この場合、私は自分のホームルートにどのように移動できますか？私は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

ルートは、常にすべてのコンポーネント（またはコンテナ）の上にある必要があります。次に、コンポーネントが "inside"ルータ（あなたの場合は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; 

そしてもちろん、移動のサインアップ・コンポーネントのスタンドアロンファイルに清潔で、よく構造プロジェクトを維持します。