使用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组件移到独立文件中，以保持项目整洁和结构良好。