OnClick事件处理程序重定向到reactjs中？

Question

我正在阅读很多东西，并试图消化如何使用withRouter和所有设备进行重定向。 但是我在某个地方读到，应该将onClick页面重定向到指定的链接。 另一件事是在react-router最新版本history.push()无法正常工作，然后如何将其与react-router的最新版本一起使用。 我也阅读了有关堆栈溢出的问题，但没有给出任何具体的解决方案。

这是基本的简单代码，但也无法获取官方文档。

如果我有表单，并且应该将提交按钮页面上的页面重定向到链接，则尝试使用history.push（），但由于官方文档显示它不起作用。 我该如何实现？

这是代码：

import React,{Component} from "react";
import {BrowserRouter as Router, Link, Switch, Route} from "react-router-dom";
class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      firstName:'',
    };
  }
  inputData = event => {
    this.setState({
      [event.target.name]:event.target.value
    });
  }

  render(){
    return(
      <div>
        <form>
          firstName
          <input type="text" name="firstName" onChange={this.inputData}/>
          <button type="submit" onClick={}></button>
        </form>
      </div>
    );
  }
}
export default App;

我应该在点击事件中写些什么，它将使我重定向到新页面？

Answer 1

对于简单的答案，您可以使用react-router中的Link组件代替按钮。

<span className="input-group-btn">
  <Link to="/register" />Click to Register</Link>
</span>

如果您使用react-router v2.8.1，请尝试实施路由器重定向。

import { Router } from 'react-router';

export default class Foo extends Component {

  static get contextTypes() {
    return {
      router: React.PropTypes.object.isRequired,
    };
  }

  handleClick() {
    this.context.router.push('/some-path');
  }
}

希望以上两种选择都能解决您的问题。