Javascript 使用react路由器导航

我想在向api提交axios请求并收集有效响应后重定向到我的主路由。可以看出，我试图使用上下文，但在这种情况下，我得到一个错误“上下文未定义”。在这种情况下，我如何导航到我的回家路线？我试过使用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

import React，{Component}来自“React”
从“axios”导入axios
从“./主页”导入主页
进口{
浏览器路由器，
链接
路线
}从“反应路由器dom”
类注册扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”
};
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
handleClick=（）=>{
axios
.post（'http://localhost:9000/signup',{
电子邮件：this.state.email，
密码：this.state.password
}).然后（功能（响应）{
console.log（response.data.success）
this.context.router.push（'/home'）；
})
}
render（）{
返回(
(
注册
this.handleChange（e）}/>


this.handleChange（e）}/>


this.handleClick（）}>submit
)}/>
)
}
}
SignUp.contextTypes={
路由器：React.PropTypes.func.isRequired
};
导出默认注册

管线应始终高于所有组件（或容器）的标高。然后，当一个组件位于路由器（在您的例子中是BrowserRouter）的“内部”时，它将获得对其上下文的访问

另外，还有另一个wich的内部渲染功能根本没有意义

因此，类似这样的方法应该有效：

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;

import React，{Component}来自“React”
从“axios”导入axios
从“./主页”导入主页
进口{
浏览器路由器，
链接
路线
}从“反应路由器dom”
类注册扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”
};
}
handleChange=（e）=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
handleClick=（）=>{
axios
.post（'http://localhost:9000/signup',{
电子邮件：this.state.email，
密码：this.state.password
}).然后（功能（响应）{
console.log（response.data.success）
this.context.router.push（'/home'）；
})
}
render（）{
返回(
注册
this.handleChange（e）}/>


this.handleChange（e）}/>


this.handleClick（）}>submit
)
}
}
SignUp.contextTypes={
路由器：React.PropTypes.func.isRequired
}; 
类应用程序扩展组件{
render（）{
返回(
)
}
}
导出默认应用程序；

---

当然，将注册组件移动到独立文件以保持项目干净且结构良好。

需要绑定函数，以便将适当的上下文传递给函数处理程序，例如

this.handleClick.bind（this）（

或者更简单地说，

onClick={this.handleClick.bind（this）}

感谢您的输入，我将此绑定到它，但上下文仍然未定义！！！您是否尝试从“react router”导入{browserHistory}；browserHistory.push（'/'）；可能重复感谢您的反馈！将路由移动到顶层解决了未定义上下文的问题；正如在中一样，我不会再收到错误，但它不会将我指向我的主组件（单击按钮使我保持在相同的“/”路线上），实际上，我想我已经满怀希望了。我甚至没有正确运行onClick函数，这就是上下文没有抛出错误的原因。在使onClick正常工作之后，我再次得到了上下文是未定义的，即使在绑定它之后也是如此！