使用React Router導航

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;

當然，將SignUp組件移到獨立文件中，以保持項目整潔和結構良好。